編輯導(dǎo)語(yǔ)：產(chǎn)品的適老化是一個(gè)很重要的研究方向，在當(dāng)前人口背景下存在著巨大的市場(chǎng)。本文是兔小巢團(tuán)隊(duì)在適老化與無(wú)障礙改造探索方面的一次階段總結(jié)，希望能為社區(qū)類產(chǎn)品，甚至是其他類型的產(chǎn)品提供一些思路，推薦感興趣的朋友們閱讀。

兔小巢作為用戶反饋互動(dòng)社區(qū)，每天能收到來(lái)自多個(gè)產(chǎn)品的成千上萬(wàn)條產(chǎn)品反饋，但是我們聽(tīng)到的是全部的聲音嗎？會(huì)不會(huì)有一些人因?yàn)楫a(chǎn)品設(shè)計(jì)上的某些細(xì)節(jié)問(wèn)題，而無(wú)法順利向產(chǎn)品團(tuán)隊(duì)提出反饋和想法呢？

本文是兔小巢團(tuán)隊(duì)在適老化與無(wú)障礙改造探索方面的一次階段總結(jié)，希望能為社區(qū)類產(chǎn)品，甚至是其他類型的產(chǎn)品提供一些思路。

聽(tīng)見(jiàn)弱勢(shì)人群的反饋聲音：騰訊兔小巢適老化和無(wú)障礙改造

一、關(guān)于適老化與無(wú)障礙的重要性

老年人和殘障人士等弱勢(shì)群體，無(wú)論是生活方式，還是日常娛樂(lè)，他們的體驗(yàn)行為或多或少會(huì)存在差異。

通過(guò)一系列的用戶調(diào)研，我們才近距離地了解到，在使用手機(jī)過(guò)程中，有一些我們習(xí)以為常的提示，可能超出了他們的理解范圍，成為了無(wú)效的信息；有一些內(nèi)容，我們可能掃一眼就能理解，但對(duì)于他們來(lái)說(shuō)可能需要多幾步操作，才能獲取具體的信息。

我國(guó) 60 歲及以上的人口已經(jīng)有 26402 萬(wàn)，占全國(guó)人口的 18.7 %，同時(shí)殘障人士的數(shù)量也不容小覷，僅視障人士的數(shù)量已經(jīng)超過(guò) 1700 萬(wàn)。但他們?cè)谑褂檬謾C(jī)軟件過(guò)程中遇到的困難，卻很難出現(xiàn)在常見(jiàn)的手機(jī)軟件意見(jiàn)反饋渠道，更別說(shuō)引起產(chǎn)品團(tuán)隊(duì)的關(guān)注。

恰好今年國(guó)家發(fā)文要求微信、 QQ 等騰訊系 9 款產(chǎn)品，在 2021 年 9 月 30 日之前完成適老化和無(wú)障礙改造。兔小巢作為嵌入在這些產(chǎn)品的反饋社區(qū)，有責(zé)任全力配合，幫助老年人及殘障人士有效地發(fā)出他們的聲音。因此，兔小巢適老化與無(wú)障礙改造提上了日程。

二、整體改造成果

圍繞適老化與無(wú)障礙，兔小巢進(jìn)行了一系列使用體驗(yàn)優(yōu)化工作，主要通過(guò)前端改造來(lái)實(shí)現(xiàn)。

三、適老化

1. 字能看清楚了——文本展示效果自適應(yīng)

在微信、 App 等條件下打開(kāi)兔小巢，頁(yè)面都可以配合應(yīng)用設(shè)置的字體大小，調(diào)整內(nèi)容展示的效果，包括文本字體大小、段落行距等，讓老年用戶無(wú)需尋找調(diào)整字體的設(shè)置，也能把字看清楚。

相比普通版兔小巢首頁(yè)，適老版的字體、按鈕等元素整體放大，方便老年用戶閱讀。另外頁(yè)面底部的按鈕文案從 “說(shuō)兩句” 改為 “我要發(fā)言”，更易于老年用戶理解按鈕的用途。

2. 頁(yè)面更“好看”了—— 頁(yè)面顏色對(duì)比度優(yōu)化

隨著年齡增長(zhǎng)，老年用戶視覺(jué)逐步衰退，具體表現(xiàn)包括視力下降、對(duì)藍(lán)/綠色不再敏感、視覺(jué)范圍變窄、較難適應(yīng)明暗變化等。

為了讓老年用戶在訪問(wèn)兔小巢時(shí)，也能獲得舒服的閱讀體驗(yàn)，兔小巢整體調(diào)整了頁(yè)面顏色的對(duì)比度。

相比舊版兔小巢首頁(yè)，新版的顏色對(duì)比度更高，方便老年用戶清晰辨認(rèn)，獲得更舒服的閱讀體驗(yàn)

四、無(wú)障礙

1. 讀屏重點(diǎn)更突出了 —— 讀屏適配改造

正常人使用手機(jī)靠 “視覺(jué)”，而視障人士則靠 “聽(tīng)覺(jué)”。大多數(shù)視障人士都是通過(guò)讀屏功能來(lái)了解屏幕上的內(nèi)容，但兔小巢此前還未實(shí)現(xiàn)讀屏軟件的相關(guān)適配，導(dǎo)致讀屏表現(xiàn)欠佳，影響實(shí)際使用。

因此，為了讓視障人士也能順暢地進(jìn)行產(chǎn)品反饋，兔小巢對(duì)讀屏功能進(jìn)行了適配改造。如聚合相關(guān)性強(qiáng)的內(nèi)容，使讀屏軟件可連續(xù)讀出，方便用戶減少操作；屏蔽無(wú)意義圖標(biāo)，讓讀屏軟件減少讀出強(qiáng)干擾性的內(nèi)容等。

以上的改造成果已經(jīng)支持公司內(nèi)外超過(guò) 7500 款接入產(chǎn)品，并且有近 4700 位老年用戶體驗(yàn)，累計(jì)反饋了 1342 條信息。

五、具體改造方案

1. 文本展示效果自適應(yīng)

在適老化改造過(guò)程中，為了實(shí)現(xiàn)客戶端字體自適應(yīng)調(diào)整，我們?cè)O(shè)計(jì)了 “元素尺寸控制系統(tǒng)”。在這個(gè)系統(tǒng)下：

元素實(shí)際尺寸 = 元素的默認(rèn)尺寸 × 倍率 （倍率通過(guò)讀取客戶端的設(shè)置獲?。?/p>

在此基礎(chǔ)上，我們還提供白名單設(shè)置，白名單內(nèi)的元素在頁(yè)面字體調(diào)整時(shí)大小保持固定不變。例如在帖子回復(fù)列表頁(yè)上，用戶頭像并不是主要信息，通過(guò)將 “用戶頭像元素” 加入白名單，可以實(shí)現(xiàn)在頁(yè)面整體適配字體變化時(shí)，頭像區(qū)不會(huì)跟隨字體放大而放大，保證了右側(cè)帖子詳情的可讀性。

兔小巢頁(yè)面的字體自適應(yīng)后，部分不影響理解的元素，如頭像區(qū)域，會(huì)保持大小不變，保障頁(yè)面整體的閱讀體驗(yàn)

2. 讀屏適配改造

在前期測(cè)試中，我們發(fā)現(xiàn)主流讀屏軟件在兔小巢的讀屏體驗(yàn)不太理想。因此，通過(guò)以下 4 個(gè)方面進(jìn)行整體的改造。

1）讀出圖標(biāo)的操作含義

【原有問(wèn)題】

有一些圖標(biāo)，普通用戶能夠輕松地感知到這是可點(diǎn)擊的按鈕，比如下圖的 “點(diǎn)贊”。

但由于代碼未能規(guī)范地將圖標(biāo)聲明為 “按鈕”，讀屏軟件無(wú)法識(shí)別，會(huì)直接略過(guò)圖標(biāo)，只朗讀出數(shù)字 ，因此視障人士很難了解到這里可以進(jìn)行點(diǎn)擊來(lái)實(shí)現(xiàn)點(diǎn)贊效果。

兔小巢反饋帖子中的 “點(diǎn)贊” 模塊

【解決方案】

我們通過(guò)將 “點(diǎn)贊圖標(biāo)” 定義為按鈕，并添加替代描述 “已/未點(diǎn)贊，XX 個(gè)贊”，讓視障人士明白這是一個(gè)可點(diǎn)擊的交互，理解點(diǎn)贊的狀態(tài)、有幾個(gè)贊等信息。

2）控制焦點(diǎn)，感知交互

【原有問(wèn)題】

常見(jiàn)的彈窗 （如下圖的提醒內(nèi)容），能夠快速引起普通用戶的注意，有著提醒、引導(dǎo)的作用。

但由于前期兔小巢不兼容讀屏軟件，提醒內(nèi)容無(wú)法讓讀屏軟件識(shí)別，視障人士無(wú)法及時(shí)感知。并且當(dāng)彈窗關(guān)閉時(shí)，讀屏焦點(diǎn)會(huì)停留在彈窗原有的位置，因此會(huì)影響讀屏軟件無(wú)法讀取應(yīng)讀的內(nèi)容。

兔小巢反饋環(huán)節(jié)中，提醒輸入內(nèi)容 “不能少于5個(gè)字”的彈窗

【解決方案】

我們通過(guò)記錄觸發(fā)焦點(diǎn)、切換焦點(diǎn)的方式，讓讀屏軟件有效讀取彈窗內(nèi)容，幫助視障人士快速感知彈窗；并且在關(guān)閉彈窗后，讓讀屏焦點(diǎn)回到原來(lái)的觸發(fā)焦點(diǎn)，可以正常讀取內(nèi)容。

3）聚合內(nèi)容，減少操作

【原有問(wèn)題】

普通用戶閱讀頁(yè)面的內(nèi)容，如昵稱、發(fā)帖時(shí)間、帖子內(nèi)容等，是自上而下連貫的。而讀屏軟件是按照實(shí)際 DOM 節(jié)點(diǎn)的順序依次朗讀的，導(dǎo)致讀屏用戶需要依次點(diǎn)擊昵稱、發(fā)帖時(shí)間、帖子內(nèi)容等區(qū)域，才能完整了解頁(yè)面上的信息。

【解決方案】

針對(duì)這部分相關(guān)性強(qiáng)的內(nèi)容，我們使用 WAI-ARIA 技術(shù)將多個(gè) DOM 節(jié)點(diǎn)聚合成一條信息，幫助視障人士點(diǎn)擊 1 次即可獲取全部信息，減少頻繁操作，提升效率。

讀屏改造前，用戶需要依次點(diǎn)擊用戶名字、發(fā)表日期、帖子內(nèi)容，才能完整了解內(nèi)容；改造后，僅需點(diǎn)擊用戶名字、帖子內(nèi)容，操作步驟減少

4）減少干擾

【原有問(wèn)題】

對(duì)于普通用戶來(lái)說(shuō)，“>”能夠幫助他們理解點(diǎn)擊相應(yīng)的位置會(huì)有下一步操作。但部分讀屏軟件會(huì)將 “>”朗讀出來(lái)，因?yàn)椤?gt;”在代碼中是通過(guò)一張圖片實(shí)現(xiàn)的，而讀屏軟件會(huì)將圖片名稱朗讀出來(lái)，所以這十分不利于視障人士理解。

常見(jiàn)問(wèn)題頁(yè)面中的點(diǎn)擊提示元素

【解決方案】

我們梳理出頁(yè)面上所有純裝飾性元素，或?qū)τ脩衾斫鈨?nèi)容沒(méi)有幫助的非文本內(nèi)容，使用 aria-hidden=true 來(lái)屏蔽，避免讀屏軟件讀取這部分的信息。

六、最后的話

為了保證功能對(duì)于老年用戶、視障人士真正可用，我們還組織了 7 位老人、8 位視障人士對(duì)優(yōu)化后的兔小巢進(jìn)行可用性測(cè)試。

針對(duì)老年用戶與視障人士在體驗(yàn)過(guò)程中進(jìn)一步暴露出來(lái)的認(rèn)知障礙問(wèn)題，我們?cè)俅蝺?yōu)化調(diào)整了 20 多處細(xì)微流程和文案表意，讓弱勢(shì)人群能夠把兔小巢輕松用起來(lái)。

一位視障用戶在可用性測(cè)試現(xiàn)場(chǎng)使用手機(jī)

以上的改造，只是我們的第一步。

隨著，我們對(duì)弱勢(shì)群體的了解更多一分，便意識(shí)到改造工作更任重道遠(yuǎn)、且無(wú)法一蹴而就。如何讓他們更容易理解每一步操作、讓他們更輕松地完成每一次點(diǎn)擊，甚至讓他們更多參與到交流互動(dòng)中來(lái)，都值得我們進(jìn)一步研究與優(yōu)化。

接下來(lái)，我們還會(huì)繼續(xù)進(jìn)行適老化與無(wú)障礙探索，希望在未來(lái)，弱勢(shì)群體不僅是發(fā)出他們的聲音，讓大家聽(tīng)見(jiàn)，還能放大他們的聲音，讓他們也能在互聯(lián)網(wǎng)世界中找到自己的價(jià)值與共鳴。

作者：兔小巢團(tuán)隊(duì)，微信公眾號(hào)：騰訊CDC體驗(yàn)設(shè)計(jì)

本文由 @騰訊CDC體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pixabay，基于CC0協(xié)議。