京喜小程式首頁無障礙優化實踐-有解無憂

前言

本文參考 WCAG 2.1 、WAI-ARIA 和 Web 可訪問性與無障礙最佳實踐，在京喜小程式首頁無障礙優化開發中，總結了一些“無障礙優化”在小程式端的實踐，希望以此推動無障礙在小程式更多地落地，

無障礙

無障礙是什么？

在了解無障礙之前，我們先來了解一些資料：

據中國盲協的最新資料顯示，中國目前視障者有 1700 多萬，隨著老齡化的嚴重，視障群體有進一步擴大的趨勢，
在中國，有著龐大的資訊障礙群體，包括：8500 多萬殘障人士，兩億多老年人，大量認知障礙人士，
…

障礙群體

無障礙

無障礙 (Accessibility)，是指在發展程序中沒有阻礙，活動能夠順利進行，從無障礙引申的相關詞匯有，無障礙設施、資訊無障礙、無障礙交流等等，

資訊無障礙

對于資訊無障礙，中國互聯網協會給出了一個定義：任何人（無論是健全人還是殘疾人，無論是年輕人還是老年人）在任何情況下都能平等地、方便地、無障礙地獲取資訊、利用資訊，

以上釋義，源自百度百科

無障礙設施

如果看不見、聽不見，我們該怎么生活呢？

看不見

在生活中，我們常常會看到一些設施：緣石坡道、盲道、無障礙垂直電梯、無障礙扶手、人行橫道的警示信號等等，這些給障礙群體使用的安全設施，就是無障礙設施 (Accessibility Facilities)，無障礙設施主要是為了讓障礙群體能夠自主、安全、方便地通行和活動，它是障礙群體生活順暢的重要保證，除物質環境的無障礙設施，無障礙設施還可以擴展到資訊和交流的無障礙，比如互聯網中的網站設計、網上辦事、購物互動等，

無障礙設施

資訊無障礙的現狀

隨著互聯網不斷發展，互聯網應用已經融入到我們生活的各個方面，行動不便的障礙群體則更希望也更需要通過方便的互聯網應用獲取資訊、學習和生活，因此，互聯網應用進行無障礙優化，對障礙群體顯得尤為重要，

早在 1997 年 2 月，萬維網聯盟 (W3C) 為了提升網路的無障礙性，成立了網路無障礙推動 (WAI)小組，并制定了一系列的關于網路無障礙的標準、規范、檢測表、無障礙的技術，并與世界各地的組織攜手合作，在全球范圍推動無障礙網路運動，

但至今為止，互聯網產品的無障礙優化進展仍然緩慢，很多網站建設和移動端 APP 的開發都還未考慮無障礙優化，即使是通過讀屏軟體，也很難獲取想要的資訊，

障礙群體調研

資訊無障礙研究會

我們以電商平臺購物 APP 為調研物件，同資訊無障礙研究會合作做了一個調研，根據收集到的輿情反饋，我們了解到：

在消費降級的當下，低價商品火遍互聯網的每個角落，障礙群體是其中需求度最大的人群之一，京喜，作為京東旗下的拼購電商平臺，與拼多多和淘寶特價版一樣，在障礙人士聚集的論壇和QQ中，有非常多的討論，用戶們對京喜沒做無障礙表示遺憾，也期待京喜可以盡快開展無障礙優化，享受低價拼購的樂趣，

根據研究會資訊無障礙工程師初步檢測，目前影響障礙用戶們使用缺陷集中在以下幾類中：

按鈕未加標簽，用戶難以了解對應按鈕點按分別會觸發哪些功能，
精簡狀態不提示或提示不符合障礙用戶理解習慣，導致用戶無法了解正確的資訊，諸如是否已加入購物車等，
焦點邏輯混亂或沒有遵循正確的讀屏瀏覽模式，致使用戶不能便捷、清晰地了解界面資訊，嚴重影響操作效率，
活動資訊或彈窗等頁面，由于使用大量字繪架構且沒有集成無障礙特性，用戶無法便捷地參與平臺營銷活動，

以上幾類屬于障礙用戶能夠無障礙使用的基本支撐，部分或完全適配后將能促使 APP 實作較好的無障礙體驗，

無障礙優化開發

在了解小程式的無障礙優化之前，首先需要了解 Web 無障礙開發的基礎知識，及讀屏軟體的作業方式，

讀屏軟體

無障礙訪問的關鍵點 —— 使用螢屏閱讀器，

移動端 APP 訪問無障礙特性，開啟讀屏模式的設定路徑：

iOS： 設定 -> 通用 -> 輔助功能 -> 旁白（VoiceOver） ，
安卓：設定 -> 輔助功能 -> 無障礙 -> TalkBack（不同機型路徑可能不一樣）

以下是一些主要的 VoiceOver 手勢：

輕點：選擇并朗讀專案，
輕點兩下：激活所選專案，
左右輕掃：選擇下一項或上一項，
三個手指向上或向下輕掃：滑動螢屏上的串列或區，
雙指搓擦：快速來回移動兩個手指三次（形成“z”字形）以解除提醒，或者回傳上一個螢屏，
更多手勢可以查看：VoiceOver - iPhone 使用手冊，

安卓的 TalkBack 手勢與 VoiceOver 有一些差異，后面還會提到……

WAI-ARIA

WAI-ARIA 通過瀏覽器把資訊暴露給 accessibility APIs (無障礙API)，作為讀屏軟體的資訊源，

WAI-ARIA ( Accessible Rich Internet Applications (WAI-ARIA) 1.1) 是一項技術，它可以通過瀏覽器和一些輔助技術來幫助我們進一步地識別以及實作語意化，這樣一來能幫助我們解決問題，也讓用戶可以了解發生了什么，WAI-ARIA 是 W3C 撰寫的規范，定義了一組可用于其他元素的 HTML 特性，用于提供額外的語意化以及改善缺乏的可訪問性，

以下是規范中三個主要的特性：

角色 —— 定義元素是干什么的，如 role='button' 表示元素是按鈕，讀屏軟體會讀作“按鈕”、role='searchbox' 表示元素用于搜索，讀屏軟體會讀作"搜索"，
屬性 —— 讓元素具備更多的意義，如 aria-required='true' 表示元素在表單上是必填的、aria-label='描述文字' 用來給當前元素標簽加上描述，用不可視的方式給元素加 label，接受字串作為引數，讀屏軟體會將描述文字朗讀出來，
狀態 —— 用于表達元素當前條件的特殊屬性，如 aria-disabled='true'
表示表單禁止輸入、aria-hidden='true' 表示元素會被讀屏軟體忽略，

更多屬性可以參考 Using Aria 中的 States and properties，部分屬性可能在小程式設定不生效，

更多 role 可以參考 Using Aria 中的 Widget Roles，部分 role 可能在小程式設定不生效，

因此，無障礙優化便可以借助讀屏軟體，結合 WAI-ARIA 的特性進行開發，互聯網應用引入無障礙特性，使得障礙用戶可以清晰準確的獲取到頁面資訊，獲得更好的產品體驗，方便地實作網上辦事、購物等，

京喜小程式首頁無障礙優化

背景

此前，京喜小程式未進行無障礙優化，障礙群體在讀屏軟體的輔助下，基本不能使用，這使得平臺失去了障礙群體的市場，同時障礙群體也失去了體驗京喜小程式平臺服務的機會，因此，希望對平臺進行無障礙優化，提升平臺的可用性、易用性，讓障礙群體享受更好的購物體驗，

優化方案

產品提供焦點劃分規則、朗讀規則、閱讀順序，為京喜小程式首頁量身定制無障礙優化方案，內部方案，這里就不透露了，（想了解的話，來投一波簡歷啊~）

開發實作

目前小程式官方已經支持無障礙訪問特性，用戶在讀屏模式下可以體驗無障礙訪問，

開發細則

DOM 順序很重要

讀屏軟體在讀屏時默認按照 DOM 的順序朗讀，
如果 DOM 的順序與內容的語意順序不一致，會使得內容難以理解，例如首頁中的商品瀑布流，按左右兩列布局：

首頁 feeds 左右兩欄

在開發程序中應盡量避免使用會影響到 DOM 視覺順序的樣式，如果無法避免，需要手動設定 tabIndex 屬性，告知讀屏軟體正確的內容順序，

非文本元素增加描述和角色屬性

通過給非文本元素增加描述和角色屬性，元素的內容就可以被讀屏軟體清晰準確地朗讀，

影像可使用 alt 屬性描述影像內容，讀屏軟體會根據 alt 中的內容朗讀出 “描述影像內容影像”，
view 本身是無語意的，可以給元素增加 aria-role 和 aria-label 屬性，讀屏軟體會朗讀出 “label 描述內容 + role 型別”，

整塊元素讀取

一個元素可能由很多子元素組成，在無障礙模式下，讀屏軟體只能分別聚焦子元素，單獨將每個子元素資訊讀出來，障礙用戶在讀屏軟體的輔助下，獲取到的都是元素零零碎碎的資訊，這樣的體驗很不友好，

icon-商品圖

因此，在無障礙優化程序中，可以將元素當作按鈕整塊朗讀，將子元素的資訊整合作為描述，并盡量精簡描述內容，縮短朗讀文案的時間，

隱藏元素讀取

如果不希望部分內容被讀出來，可以使用 aria-hidden='true' 來宣告，這樣讀屏時就會忽略這些元素，

 <Text aria-hidden='true'>讀屏時會忽略這行文本</Text>

在無障礙模式下，這個屬性可用來隱藏輔助作用不大或是具有干擾性的內容，

場景實作

非文本元素讀取

首頁頭部中京喜 Logo 和文字是一整張圖片，聚焦后，讀屏軟體默認會讀成影像，無法將圖片中的文字朗讀出來，這樣的無障礙體驗是非常差的，

驚喜Logo

在這個場景下，可通過給 Logo 圖片增加描述來進行無障礙優化，

 <View className='index__main'>
    <View className='index__logo' aria-role='text' aria-label='京喜' />
    <View className='index__title'>京東旗下社交電商平臺</View>
 </View>

類似的還有關閉按鈕、回傳頂部按鈕、選單欄按鈕……

關閉按鈕、回傳頂部按鈕、選單欄按鈕

<View
   className='back-top'
   aria-role='button'
   aria-label='回傳頂部'
/>

搜索框讀取

首頁搜索框聚焦后，讀屏軟體默認會將搜索框中的暗紋讀出來，但是障礙用戶并不能明顯的感知到搜索框元素，

搜索框

在這個場景下，可以通過給搜索框增加角色屬性來進行無障礙優化，

<View aria-role='searchbox'>
    <SearchBar />
</View>

輪播圖讀取

輪播圖由多個子元素組成，但點擊為整塊點擊，且每個子元素都是圖片，讀屏軟體無法讓用戶清晰感知元素的含義，

輪播圖

在這樣的場景下，可以給每一個子元素標簽增加描述，讀屏軟體就可以識別到子元素了，

<View className='banner'>
    <Swiper>
        <SwiperItem aria-role='text' aria-label='活動推薦1'>活動1</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活動推薦2'>活動2</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活動推薦3'>活動3</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活動推薦4'>活動4</SwiperItem>
    </Swiper>
</View>

但這樣的無障礙優化在安卓手機上體驗并不友好，

當障礙用戶聚焦到輪播圖后，讀屏軟體將子元素的描述朗讀讀來，輪播圖繼續輪播，焦點索引卻不會隨輪播狀態自動更新，而是跟隨當前子元素滑動消失在螢屏中，若要獲取更新后的輪播資訊，需要重新聚焦，

輪播圖

在這樣的場景下，建議在輪播圖的最外層增加描述，將整塊內容當作按鈕處理，讓障礙用戶清楚這是整體點擊的按鈕，

<View className='banner' aria-role='button' aria-label='活動推薦，共4個'>
    <Swiper>
        <SwiperItem>活動1</SwiperItem>
        <SwiperItem>活動2</SwiperItem>
        <SwiperItem>活動3</SwiperItem>
        <SwiperItem>活動4</SwiperItem>
    </Swiper>
</View>

商品卡片讀取

商品卡片由多個子元素組成，讀屏軟體會將聚焦的子元素（商品圖、名字、價格、利益點等）一個個的讀出來，

商品圖

但單獨讀出每個子元素，不便于障礙用戶理解商品卡片的完整含義，

類似這樣的場景，可以將商品卡片當作一個按鈕整塊處理，在商品卡片最外層標簽加上 aria-role='button'，還可以通過 aria-label 標簽，將商品資訊進行整合，精簡描述，縮短商品名字的朗讀時間，讓障礙用戶獲得更好的體驗，

隱藏元素讀取

上文提到商品卡片的無障礙優化可通過 aria-role='button' 和 aria-label 來實作，理想情況下，當障礙用戶聚焦到商品卡片，讀屏軟體將整合的商品資訊朗讀出來，并提示是按鈕型別，

但實際情況并非如此，當障礙用戶在安卓手機上聚焦后，讀屏軟體不僅會將整合的商品資訊和 role 朗讀出來，還會將商品卡片子元素的文本內容朗讀出來，（后文會提到 iOS 的表現）

為了避免商品資訊重復朗讀，可以在元素文本標簽上加上 aria-hidden='true' ，隱藏子元素文本描述，讓障礙用戶能夠獲取到清晰簡潔的商品資訊，

<View aria-role='button' aria-label='商品整合資訊'>
    <View aria-hidden='true'>
        <Image className='goods__img' src='https://img.uj5u.com/2020/09/23/96951231000581.png' lazyLoad />
        <View className='goods__info'>商品資訊…</View>
    </View>
</View>

iOS 和安卓端的差異

滑屏手勢差異

安卓：雙指滑動，根據手勢自適應滑動；

iOS：三指滑動，一屏一屏分頁滑動，

輪播圖焦點差異

輪播圖

安卓：焦點位置會跟隨子元素滑動消失；

iOS：焦點位置固定不變，不會隨子元素滑動而消失，

價格讀取差異

￥259.2

由于整數部分和小數部分字體大小不同，價格文本是用多個標簽實作的，

<View>
    &yen;
    <Text>259</Text>
    <Text>.2</Text>
</View>

安卓：完整朗讀 “259.2元”；

iOS：單獨朗讀單位、整數、小數，并且會將 “￥” 讀作“美元符號”，

aria-role='button' 讀取差異

安卓：讀作“描述+按鈕+子元素文本描述”，需借助 aria-hidden='true' 隱藏子元素文本描述，避免資訊重復朗讀，

iOS：有兩種情況，

如果標簽同時設定了 aria-label ，則讀作“描述按鈕”，不重復朗讀子元素文本，
如果標簽僅設定了 aria-role='button' ，會繼續識別子元素文本，讀作“描述+按鈕+子元素文本描述”，為避免重復朗讀，也需要給子元素加上 aria-hidden='true'，

小程式無障礙展望

小程式基礎庫自 2.7.1 起，支持部分 ARIA 標簽，但是仍有部分屬性和 role 在小程式中不生效，希望未來可以支持所有的 ARIA 標簽，給障礙用戶帶來更好的體驗，

另外，小程式目前還沒有相關 API 支持識別用戶手機是否開啟無障礙（讀屏）模式（原生 APP 可以通過相關 API識別），如果能預知用戶手機開啟了無障礙模式，就可以通過動態控制前端模塊展示，從而更好的隱藏無用資訊、排除干擾資訊（浮層彈窗、影片等），在啟無障礙模式下，設定資料埋點上報，還可以為障礙用戶提供更好的體驗，

希望微信小程式能盡快加強對無障礙優化開發的支持力度，讓障礙群體能夠享受資訊化所帶來的成果，享受便捷美好的生活，

無障礙體驗

手機開啟讀屏模式，掃碼二維碼體驗：

京喜小程式二維碼

結語

京喜小程式首頁無障礙優化上線后，我們對調研的障礙群體進行了回訪，并且得到了不錯的體驗反饋，

這是我們在小程式無障礙優化上邁出的第一步，要獲得更好的小程式無障礙訪問體驗還有很長一段路要走……

希望此次小程式無障礙優化實踐，能讓障礙群體享受互聯網應用所帶來的便利，更好的享受生活，

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

歡迎關注凹凸實驗室公眾號

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/110988.html

標籤：其他

上一篇：JELLY技術周刊 Vol.23: Vue3 是偉大航路上的 One Piece 么？

下一篇：CSS文本屬性