兔小巢 （txc.qq.com） 是一款由騰訊 CDC 開發的用戶反饋互動社區，讓騰訊內外各產品團隊無需開發即可快速生成專屬社區，高效收集用戶反饋，并與用戶進行深入交流。兔小巢作為用戶反饋互動社區，每天能收到來自多個產品的成千上萬條產品反饋，但是我們聽到的是全部的聲音嗎？會不會有一些人因為產品設計上的某些細節問題，而無法順利向產品團隊提出反饋和想法呢？

本文是兔小巢團隊在適老化與無障礙改造探索方面的一次階段總結，希望能為社區類產品，甚至是其他類型的產品提供一些思路。

關于適老化與無障礙的重要性

老年人和殘障人士等弱勢群體，無論是生活方式，還是日常娛樂，他們的體驗行為或多或少會存在差異。

通過一系列的用戶調研，我們才近距離地了解到，在使用手機過程中，有一些我們習以為常的提示，可能超出了他們的理解范圍，成為了無效的信息；有一些內容，我們可能掃一眼就能理解，但對于他們來說可能需要多幾步操作，才能獲取具體的信息。

我國 60 歲及以上的人口已經有 26402 萬，占全國人口的 18.7%，同時殘障人士的數量也不容小覷，僅視障人士的數量已經超過 1700 萬。但他們在使用手機軟件過程中遇到的困難，卻很難出現在常見的手機軟件意見反饋渠道，更別說引起產品團隊的關注。

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

整體改造成果

圍繞適老化與無障礙，兔小巢進行了一系列使用體驗優化工作，主要通過前端改造來實現：

1. 適老化

字能看清楚了——文本展示效果自適應

在微信、App 等條件下打開兔小巢，頁面都可以配合應用設置的字體大小，調整內容展示的效果，包括文本字體大小、段落行距等，讓老年用戶無需尋找調整字體的設置，也能把字看清楚。

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

頁面更“好看”了——頁面顏色對比度優化

隨著年齡增長，老年用戶視覺逐步衰退，具體表現包括視力下降、對藍/綠色不再敏感、視覺范圍變窄、較難適應明暗變化等。

為了讓老年用戶在訪問兔小巢時，也能獲得舒服的閱讀體驗，兔小巢整體調整了頁面顏色的對比度。

關于適老化設計的顏色使用，請參考這篇：

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

2. 無障礙

讀屏重點更突出了——讀屏適配改造

正常人使用手機靠“視覺”，而視障人士則靠“聽覺”。大多數視障人士都是通過讀屏功能來了解屏幕上的內容，但兔小巢此前還未實現讀屏軟件的相關適配，導致讀屏表現欠佳，影響實際使用。

因此，為了讓視障人士也能順暢地進行產品反饋，兔小巢對讀屏功能進行了適配改造。如聚合相關性強的內容，使讀屏軟件可連續讀出，方便用戶減少操作；屏蔽無意義圖標，讓讀屏軟件減少讀出強干擾性的內容等。

以上的改造成果已經支持公司內外超過 7500 款接入產品，并且有近 4700 位老年用戶體驗，累計反饋了 1342 條信息。

具體改造方案

1. 文本展示效果自適應

在適老化改造過程中，為了實現客戶端字體自適應調整，我們設計了“元素尺寸控制系統”。在這個系統下：

元素實際尺寸=元素的默認尺寸 × 倍率（倍率通過讀取客戶端的設置獲取）

在此基礎上，我們還提供白名單設置，白名單內的元素在頁面字體調整時大小保持固定不變。例如在帖子回復列表頁上，用戶頭像并不是主要信息，通過將“用戶頭像元素”加入白名單，可以實現在頁面整體適配字體變化時，頭像區不會跟隨字體放大而放大，保證了右側帖子詳情的可讀性。

兔小巢頁面的字體自適應后，部分不影響理解的元素，如頭像區域，會保持大小不變，保障頁面整體的閱讀體驗

2. 讀屏適配改造

在前期測試中，我們發現主流讀屏軟件在兔小巢的讀屏體驗不太理想。因此，通過以下 4 個方面進行整體的改造：

讀出圖標的操作含義

「原有問題」

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

但由于代碼未能規范地將圖標聲明為“按鈕”，讀屏軟件無法識別，會直接略過圖標，只朗讀出數字 ，因此視障人士很難了解到這里可以進行點擊來實現點贊效果。

兔小巢反饋帖子中的“點贊”模塊

「解決方案」

我們通過將“點贊圖標”定義為按鈕，并添加替代描述“已/未點贊，XX 個贊”，讓視障人士明白這是一個可點擊的交互，理解點贊的狀態、有幾個贊等信息。

控制焦點，感知交互

「原有問題」

常見的彈窗（如下圖的提醒內容），能夠快速引起普通用戶的注意，有著提醒、引導的作用。

但由于前期兔小巢不兼容讀屏軟件，提醒內容無法讓讀屏軟件識別，視障人士無法及時感知。并且當彈窗關閉時，讀屏焦點會停留在彈窗原有的位置，因此會影響讀屏軟件無法讀取應讀的內容。

兔小巢反饋環節中，提醒輸入內容”不能少于 5 個字“的彈窗

「解決方案」

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

聚合內容，減少操作

「原有問題」

普通用戶閱讀頁面的內容，如昵稱、發帖時間、帖子內容等，是自上而下連貫的。而讀屏軟件是按照實際 DOM 節點的順序依次朗讀的，導致讀屏用戶需要依次點擊昵稱、發帖時間、帖子內容等區域，才能完整了解頁面上的信息。

「解決方案」

針對這部分相關性強的內容，我們使用 WAI-ARIA 技術將多個 DOM 節點聚合成一條信息，幫助視障人士點擊 1 次即可獲取全部信息，減少頻繁操作，提升效率。

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

減少干擾

「原有問題」

對于普通用戶來說，“>”能夠幫助他們理解點擊相應的位置會有下一步操作。但部分讀屏軟件會將 “>”朗讀出來，因為“>”在代碼中是通過一張圖片實現的，而讀屏軟件會將圖片名稱朗讀出來，所以這十分不利于視障人士理解。

常見問題頁面中的點擊提示元素

「解決方案」

我們梳理出頁面上所有純裝飾性元素，或對用戶理解內容沒有幫助的非文本內容，使用 aria-hidden=true 來屏蔽，避免讀屏軟件讀取這部分的信息。

最后的話

為了保證功能對于老年用戶、視障人士真正可用，我們還組織了 7 位老人、8 位視障人士對優化后的兔小巢進行可用性測試。

針對老年用戶與視障人士在體驗過程中進一步暴露出來的認知障礙問題，我們再次優化調整了 20 多處細微流程和文案表意，讓弱勢人群能夠把兔小巢輕松用起來。

一位視障用戶在可用性測試現場使用手機

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

隨著，我們對弱勢群體的了解更多一分，便意識到改造工作更任重道遠、且無法一蹴而就。如何讓他們更容易理解每一步操作、讓他們更輕松地完成每一次點擊，甚至讓他們更多參與到交流互動中來，都值得我們進一步研究與優化。

接下來，我們還會繼續進行適老化與無障礙探索，希望在未來，弱勢群體不僅是發出他們的聲音，讓大家聽見，還能放大他們的聲音，讓他們也能在互聯網世界中找到自己的價值與共鳴。