京喜小程序首頁無障礙優(yōu)化實(shí)踐
前言—
本文參考 WCAG 2.1 、WAI-ARIA 和 Web 可訪問性與無障礙最佳實(shí)踐，在京喜小程序首頁無障礙優(yōu)化開發(fā)中，總結(jié)了一些“無障礙優(yōu)化”在小程序端的實(shí)踐，希望以此推動(dòng)無障礙在小程序更多地落地。
無障礙—
無障礙是什么？
在了解無障礙之前，我們先來了解一些數(shù)據(jù)：
據(jù)中國盲協(xié)的最新數(shù)據(jù)顯示，中國目前視障者有 1700 多萬，隨著老齡化的嚴(yán)重，視障群體有進(jìn)一步擴(kuò)大的趨勢。 在中國，有著龐大的信息障礙群體，包括：8500 多萬殘障人士，兩億多老年人，大量認(rèn)知障礙人士。 …
無障礙
無障礙 (Accessibility)，是指在發(fā)展過程中沒有阻礙，活動(dòng)能夠順利進(jìn)行。從無障礙引申的相關(guān)詞匯有，無障礙設(shè)施、信息無障礙、無障礙交流等等。
信息無障礙
對于信息無障礙，中國互聯(lián)網(wǎng)協(xié)會(huì)給出了一個(gè)定義：任何人（無論是健全人還是殘疾人，無論是年輕人還是老年人）在任何情況下都能平等地、方便地、無障礙地獲取信息、利用信息。
“以上釋義，源自百度百科
”
無障礙設(shè)施
如果看不見、聽不見，我們該怎么生活呢？
在生活中，我們常常會(huì)看到一些設(shè)施：緣石坡道、盲道、無障礙垂直電梯、無障礙扶手、人行橫道的警示信號等等。這些給障礙群體使用的安全設(shè)施，就是無障礙設(shè)施 (Accessibility Facilities)。無障礙設(shè)施主要是為了讓障礙群體能夠自主、安全、方便地通行和活動(dòng)，它是障礙群體生活順暢的重要保證。除物質(zhì)環(huán)境的無障礙設(shè)施，無障礙設(shè)施還可以擴(kuò)展到信息和交流的無障礙，比如互聯(lián)網(wǎng)中的網(wǎng)站設(shè)計(jì)、網(wǎng)上辦事、購物交互等。
信息無障礙的現(xiàn)狀
隨著互聯(lián)網(wǎng)不斷發(fā)展，互聯(lián)網(wǎng)應(yīng)用已經(jīng)融入到我們生活的各個(gè)方面，行動(dòng)不便的障礙群體則更希望也更需要通過方便的互聯(lián)網(wǎng)應(yīng)用獲取信息、學(xué)習(xí)和生活。因此，互聯(lián)網(wǎng)應(yīng)用進(jìn)行無障礙優(yōu)化，對障礙群體顯得尤為重要。
早在 1997 年 2 月，萬維網(wǎng)聯(lián)盟 (W3C) 為了提升網(wǎng)絡(luò)的無障礙性，成立了網(wǎng)絡(luò)無障礙推動(dòng) (WAI)小組，并制定了一系列的關(guān)于網(wǎng)絡(luò)無障礙的標(biāo)準(zhǔn)、規(guī)范、檢測表以及無障礙的技術(shù)，并與世界各地的組織攜手合作，在全球范圍推動(dòng)無障礙網(wǎng)絡(luò)運(yùn)動(dòng)。
但至今為止，互聯(lián)網(wǎng)產(chǎn)品的無障礙優(yōu)化進(jìn)展仍然緩慢，很多網(wǎng)站建設(shè)和移動(dòng)端 APP 的開發(fā)都還未考慮無障礙優(yōu)化，即使是通過讀屏軟件，也很難獲取想要的信息。
障礙群體調(diào)研
我們以電商平臺(tái)購物 APP ?為調(diào)研對象，同信息無障礙研究會(huì)合作做了一個(gè)調(diào)研。根據(jù)收集到的輿情反饋，我們了解到：
在消費(fèi)降級的當(dāng)下，低價(jià)商品火遍互聯(lián)網(wǎng)的每個(gè)角落，障礙群體是其中需求度最大的人群之一。京喜，作為京東旗下的拼購電商平臺(tái)，與拼多多和淘寶特價(jià)版一樣，在障礙人士聚集的論壇和QQ中，有非常多的討論。用戶們對京喜沒做無障礙表示遺憾，也期待京喜可以盡快開展無障礙優(yōu)化，享受低價(jià)拼購的樂趣。
根據(jù)研究會(huì)信息無障礙工程師初步檢測，目前影響障礙用戶們使用缺陷集中在以下幾類中：
按鈕未加標(biāo)簽，用戶難以了解對應(yīng)按鈕點(diǎn)按分別會(huì)觸發(fā)哪些功能。 精簡狀態(tài)不提示或提示不符合障礙用戶理解習(xí)慣，導(dǎo)致用戶無法了解正確的信息，諸如是否已加入購物車等。 焦點(diǎn)邏輯混亂或沒有遵循正確的讀屏瀏覽模式，致使用戶不能便捷、清晰地了解界面信息，嚴(yán)重影響操作效率。 活動(dòng)信息或彈窗等頁面，由于使用大量字繪架構(gòu)且沒有集成無障礙特性，用戶無法便捷地參與平臺(tái)營銷活動(dòng)。
以上幾類屬于障礙用戶能夠無障礙使用的基本支撐，部分或完全適配后將能促使 APP 實(shí)現(xiàn)較好的無障礙體驗(yàn)。
無障礙優(yōu)化開發(fā)—
在了解小程序的無障礙優(yōu)化之前，首先需要了解 Web 無障礙開發(fā)的基礎(chǔ)知識，及讀屏軟件的工作方式。
讀屏軟件
無障礙訪問的關(guān)鍵點(diǎn) —— 使用屏幕閱讀器。
移動(dòng)端 APP 訪問無障礙特性，開啟讀屏模式的設(shè)置路徑：
iOS： 設(shè)置 -> 通用 -> 輔助功能 -> 旁白（VoiceOver）。安卓： 設(shè)置 -> 輔助功能 -> 無障礙 -> TalkBack（不同機(jī)型路徑可能不一樣）
以下是一些主要的 VoiceOver 手勢：
輕點(diǎn)：選擇并朗讀項(xiàng)目。 輕點(diǎn)兩下：激活所選項(xiàng)目。 左右輕掃：選擇下一項(xiàng)或上一項(xiàng)。 三個(gè)手指向上或向下輕掃：滑動(dòng)屏幕上的列表或區(qū)。 雙指搓擦：快速來回移動(dòng)兩個(gè)手指三次（形成“z”字形）以解除提醒，或者返回上一個(gè)屏幕。 更多手勢可以查看 ：VoiceOver - iPhone 使用手冊。
安卓的 TalkBack 手勢與 VoiceOver 有一些差異，后面還會(huì)提到……
WAI-ARIA
WAI-ARIA 通過瀏覽器把信息暴露給 accessibility APIs (無障礙API)，作為讀屏軟件的信息源。
“WAI-ARIA ( Accessible Rich Internet Applications (WAI-ARIA) 1.1) 是一項(xiàng)技術(shù)，它可以通過瀏覽器和一些輔助技術(shù)來幫助我們進(jìn)一步地識別以及實(shí)現(xiàn)語義化，這樣一來能幫助我們解決問題，也讓用戶可以了解發(fā)生了什么。WAI-ARIA 是 W3C 編寫的規(guī)范，定義了一組可用于其他元素的 HTML ?特性，用于提供額外的語義化以及改善缺乏的可訪問性。
”
以下是規(guī)范中三個(gè)主要的特性：
角色 —— 定義元素是干什么的。如 role='button'?表示元素是按鈕，讀屏軟件會(huì)讀作“按鈕”、role='searchbox'表示元素用于搜索，讀屏軟件會(huì)讀作"搜索"。屬性 —— 讓元素具備更多的意義。如 aria-required='true'表示元素在表單上是必填的、aria-label='描述文字'用來給當(dāng)前元素標(biāo)簽加上描述，用不可視的方式給元素加 label，接受字符串作為參數(shù)，讀屏軟件會(huì)將描述文字朗讀出來。狀態(tài) —— 用于表達(dá)元素當(dāng)前條件的特殊屬性。如 aria-disabled='true'表示表單禁止輸入、aria-hidden='true'表示元素會(huì)被讀屏軟件忽略。
更多屬性可以參考 Using Aria 中的 States and properties，部分屬性可能在小程序設(shè)置不生效。
更多 role 可以參考 Using Aria 中的 Widget Roles，部分 role 可能在小程序設(shè)置不生效。
因此，無障礙優(yōu)化便可以借助讀屏軟件，結(jié)合 WAI-ARIA 的特性進(jìn)行開發(fā)。互聯(lián)網(wǎng)應(yīng)用引入無障礙特性，使得障礙用戶可以清晰準(zhǔn)確的獲取到頁面信息，獲得更好的產(chǎn)品體驗(yàn)，方便地實(shí)現(xiàn)網(wǎng)上辦事、購物等。
京喜小程序首頁無障礙優(yōu)化—
背景
此前，京喜小程序未進(jìn)行無障礙優(yōu)化，障礙群體在讀屏軟件的輔助下，基本不能使用。這使得平臺(tái)失去了障礙群體的市場，同時(shí)障礙群體也失去了體驗(yàn)京喜小程序平臺(tái)服務(wù)的機(jī)會(huì)。因此，希望對平臺(tái)進(jìn)行無障礙優(yōu)化，提升平臺(tái)的可用性、易用性，讓障礙群體享受更好的購物體驗(yàn)。
優(yōu)化方案
產(chǎn)品提供焦點(diǎn)劃分規(guī)則、朗讀規(guī)則、閱讀順序，為京喜小程序首頁量身定制無障礙優(yōu)化方案。內(nèi)部方案，這里就不透露了。（想了解的話，來投一波簡歷啊~）
開發(fā)實(shí)現(xiàn)
目前小程序官方已經(jīng)支持無障礙訪問特性，用戶在讀屏模式下可以體驗(yàn)無障礙訪問。
開發(fā)細(xì)則
DOM 順序很重要
讀屏軟件在讀屏?xí)r默認(rèn)按照 DOM 的順序朗讀。如果 DOM 的順序與內(nèi)容的語義順序不一致，會(huì)使得內(nèi)容難以理解。例如首頁中的商品瀑布流，按左右兩列布局：
在開發(fā)過程中應(yīng)盡量避免使用會(huì)影響到 DOM 視覺順序的樣式，如果無法避免，需要手動(dòng)設(shè)置 tabIndex 屬性，告知讀屏軟件正確的內(nèi)容順序。
非文本元素增加描述和角色屬性
通過給非文本元素增加描述和角色屬性，元素的內(nèi)容就可以被讀屏軟件清晰準(zhǔn)確地朗讀。
圖像可使用 alt 屬性描述圖像內(nèi)容，讀屏軟件會(huì)根據(jù) alt 中的內(nèi)容朗讀出 “描述圖像內(nèi)容 圖像”。view 本身是無語義的，可以給元素增加 aria-role和aria-label屬性。讀屏軟件會(huì)朗讀出“l(fā)abel 描述內(nèi)容 + role 類型”。
整塊元素讀取
一個(gè)元素可能由很多子元素組成。在無障礙模式下，讀屏軟件只能分別聚焦子元素，單獨(dú)將每個(gè)子元素信息讀出來。障礙用戶在讀屏軟件的輔助下，獲取到的都是元素零零碎碎的信息，這樣的體驗(yàn)很不友好。
因此，在無障礙優(yōu)化過程中，可以將元素當(dāng)作按鈕整塊朗讀，將子元素的信息整合作為描述，并盡量精簡描述內(nèi)容，縮短朗讀文案的時(shí)間。
隱藏元素讀取
如果不希望部分內(nèi)容被讀出來，可以使用 aria-hidden='true' 來聲明，這樣讀屏?xí)r就會(huì)忽略這些元素。
在無障礙模式下，這個(gè)屬性可用來隱藏輔助作用不大或是具有干擾性的內(nèi)容。
場景實(shí)現(xiàn)
非文本元素讀取
首頁頭部中京喜 Logo 和文字是一整張圖片。聚焦后，讀屏軟件默認(rèn)會(huì)讀成圖像，無法將圖片中的文字朗讀出來。這樣的無障礙體驗(yàn)是非常差的。
在這個(gè)場景下，可通過給 Logo 圖片增加描述來進(jìn)行無障礙優(yōu)化。
京東旗下社交電商平臺(tái)
類似的還有關(guān)閉按鈕、返回頂部按鈕、菜單欄按鈕……
className='back-top'
aria-role='button'
aria-label='返回頂部'
/>
搜索框讀取
首頁搜索框聚焦后，讀屏軟件默認(rèn)會(huì)將搜索框中的暗紋讀出來。但是障礙用戶并不能明顯的感知到搜索框元素。
在這個(gè)場景下，可以通過給搜索框增加角色屬性來進(jìn)行無障礙優(yōu)化。
輪播圖讀取
輪播圖由多個(gè)子元素組成，但點(diǎn)擊為整塊點(diǎn)擊，且每個(gè)子元素都是圖片，讀屏軟件無法讓用戶清晰感知元素的含義。
在這樣的場景下，可以給每一個(gè)子元素標(biāo)簽增加描述，讀屏軟件就可以識別到子元素了。
活動(dòng)1
活動(dòng)2
活動(dòng)3
活動(dòng)4
但這樣的無障礙優(yōu)化在安卓手機(jī)上體驗(yàn)并不友好。
當(dāng)障礙用戶聚焦到輪播圖后，讀屏軟件將子元素的描述朗讀讀來。輪播圖繼續(xù)輪播，焦點(diǎn)索引卻不會(huì)隨輪播狀態(tài)自動(dòng)更新，而是跟隨當(dāng)前子元素滑動(dòng)消失在屏幕中。若要獲取更新后的輪播信息，需要重新聚焦。
在這樣的場景下，建議在輪播圖的最外層增加描述，將整塊內(nèi)容當(dāng)作按鈕處理，讓障礙用戶清楚這是整體點(diǎn)擊的按鈕。
活動(dòng)1
活動(dòng)2
活動(dòng)3
活動(dòng)4
商品卡片讀取
商品卡片由多個(gè)子元素組成，讀屏軟件會(huì)將聚焦的子元素（商品圖、名字、價(jià)格、利益點(diǎn)等）一個(gè)個(gè)的讀出來。
但單獨(dú)讀出每個(gè)子元素，不便于障礙用戶理解商品卡片的完整含義。
類似這樣的場景，可以將商品卡片當(dāng)作一個(gè)按鈕整塊處理。在商品卡片最外層標(biāo)簽加上 aria-role='button'，還可以通過 aria-label ?標(biāo)簽，將商品信息進(jìn)行整合，精簡描述，縮短商品名字的朗讀時(shí)間，讓障礙用戶獲得更好的體驗(yàn)。
隱藏元素讀取
上文提到商品卡片的無障礙優(yōu)化可通過 aria-role='button' 和 aria-label 來實(shí)現(xiàn)。理想情況下，當(dāng)障礙用戶聚焦到商品卡片，讀屏軟件將整合的商品信息朗讀出來，并提示是按鈕類型。
但實(shí)際情況并非如此。當(dāng)障礙用戶在安卓手機(jī)上聚焦后，讀屏軟件不僅會(huì)將整合的商品信息和 role 朗讀出來，還會(huì)將商品卡片子元素的文本內(nèi)容朗讀出來。（后文會(huì)提到 iOS 的表現(xiàn)）
為了避免商品信息重復(fù)朗讀，可以在元素文本標(biāo)簽上加上 ?aria-hidden='true' ，隱藏子元素文本描述，讓障礙用戶能夠獲取到清晰簡潔的商品信息。
iOS 和安卓端的差異
滑屏手勢差異
安卓：雙指滑動(dòng)，根據(jù)手勢自適應(yīng)滑動(dòng)；
iOS：三指滑動(dòng)，一屏一屏分頁滑動(dòng)。
輪播圖焦點(diǎn)差異
安卓：焦點(diǎn)位置會(huì)跟隨子元素滑動(dòng)消失；
iOS：焦點(diǎn)位置固定不變，不會(huì)隨子元素滑動(dòng)而消失。
價(jià)格讀取差異
由于整數(shù)部分和小數(shù)部分字體大小不同，價(jià)格文本是用多個(gè)標(biāo)簽實(shí)現(xiàn)的。
￥
259
.2
安卓：完整朗讀 “259.2元”；
iOS：單獨(dú)朗讀單位、整數(shù)、小數(shù)，并且會(huì)將 “￥” 讀作“美元符號”。
aria-role='button' 讀取差異
安卓：讀作“描述+按鈕+子元素文本描述”，需借助 aria-hidden='true' 隱藏子元素文本描述，避免信息重復(fù)朗讀。
iOS：有兩種情況。
如果標(biāo)簽同時(shí)設(shè)置了 aria-label，則讀作“描述 按鈕”，不重復(fù)朗讀子元素文本。如果標(biāo)簽僅設(shè)置了 aria-role='button'，會(huì)繼續(xù)識別子元素文本，讀作“描述+按鈕+子元素文本描述”。為避免重復(fù)朗讀，也需要給子元素加上aria-hidden='true'。
小程序無障礙展望—
小程序基礎(chǔ)庫自 2.7.1 起，支持部分 ARIA 標(biāo)簽，但是仍有部分屬性和 role 在小程序中不生效，希望未來可以支持所有的 ARIA 標(biāo)簽，給障礙用戶帶來更好的體驗(yàn)。
另外，小程序目前還沒有相關(guān) API 支持識別用戶手機(jī)是否開啟無障礙（讀屏）模式（原生 APP 可以通過相關(guān) API識別）。如果能預(yù)知用戶手機(jī)開啟了無障礙模式，就可以通過動(dòng)態(tài)控制前端模塊展示，從而更好的隱藏?zé)o用信息、排除干擾信息（浮層彈窗、動(dòng)畫等）。在無障礙模式下，設(shè)置數(shù)據(jù)埋點(diǎn)上報(bào)，還可以為障礙用戶提供更好的體驗(yàn)。
希望微信小程序能盡快加強(qiáng)對無障礙優(yōu)化開發(fā)的支持力度，讓障礙群體能夠享受信息化所帶來的成果，享受便捷美好的生活。
無障礙體驗(yàn)—
手機(jī)開啟讀屏模式，掃碼二維碼體驗(yàn)：
結(jié)語—
京喜小程序首頁無障礙優(yōu)化上線后，我們對調(diào)研的障礙群體進(jìn)行了回訪，并且得到了不錯(cuò)的體驗(yàn)反饋。
這是我們在小程序無障礙優(yōu)化上邁出的第一步，要獲得更好的小程序無障礙訪問體驗(yàn)還有很長一段路要走……
希望此次小程序無障礙優(yōu)化實(shí)踐，能讓障礙群體享受互聯(lián)網(wǎng)應(yīng)用所帶來的便利，更好的享受生活。
掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。
“在看和轉(zhuǎn)發(fā)”就是最大的支持