京喜小程序首頁無障礙優化實踐

時間  2020-09-24
標籤 程序 首頁 無障礙 優化 實踐 欄目 悠閒生活 简体版
原文   原文鏈接

前言

本文參考 WCAG 2.1 、WAI-ARIA 和 Web 可訪問性與無障礙最佳實踐，在京喜小程序首頁無障礙優化開發中，總結了一些「無障礙優化」在小程序端的實踐，但願以此推進無障礙在小程序更多地落地。html

無障礙

無障礙是什麼？

在瞭解無障礙以前，咱們先來了解一些數據：前端

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

    障礙羣體

無障礙

無障礙 (Accessibility)，是指在發展過程當中沒有阻礙，活動可以順利進行。從無障礙引伸的相關詞彙有，無障礙設施、信息無障礙、無障礙交流等等。小程序

信息無障礙

對於信息無障礙，中國互聯網協會給出了一個定義：任何人（不管是健全人仍是殘疾人，不管是年輕人仍是老年人）在任何狀況下都能平等地、方便地、無障礙地獲取信息、利用信息。微信小程序

以上釋義，源自百度百科

無障礙設施

若是看不見、聽不見，咱們該怎麼生活呢？瀏覽器

看不見

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

無障礙設施

信息無障礙的現狀

隨着互聯網不斷髮展，互聯網應用已經融入到咱們生活的各個方面，行動不便的障礙羣體則更但願也更須要經過方便的互聯網應用獲取信息、學習和生活。所以，互聯網應用進行無障礙優化，對障礙羣體顯得尤其重要。微信

早在 1997 年 2 月，萬維網聯盟 (W3C) 爲了提高網絡的無障礙性，成立了網絡無障礙推進 (WAI)小組，並制定了一系列的關於網絡無障礙的標準、規範、檢測表、無障礙的技術，並與世界各地的組織攜手合做，在全球範圍推進無障礙網絡運動。網絡

但至今爲止，互聯網產品的無障礙優化進展仍然緩慢，不少網站建設和移動端 APP 的開發都還未考慮無障礙優化，即便是經過讀屏軟件，也很難獲取想要的信息。架構

障礙羣體調研

信息無障礙研究會

咱們以電商平臺購物 APP 爲調研對象，同信息無障礙研究會合做作了一個調研。根據收集到的輿情反饋，咱們瞭解到：app

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

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

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

以上幾類屬於障礙用戶可以無障礙使用的基本支撐，部分或徹底適配後將能促使 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='/img/bVbPbr5' 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），不定時推送文章。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程