H5無障礙適配在京東收銀臺中的實踐

背景

之前無障礙工作取得了很好的成績，並得到北京電視臺、北京晚報等媒體的報道。爲了給視覺障礙用戶帶來更好地體驗，在新的一年裏計劃建立更完善的無障礙優化機制，爭取把京東的無障礙體驗做成業界標杆。

京東APP模擬無障礙模式

現狀分析

在開啓無障礙（iOS）/旁白（Android）模式下進入我們的app瀏覽購物時，會存在按鈕無法獲取焦點從而無障礙用戶無法點擊導致無法繼續購物或參與抽獎之類的活動，或者當聚焦到價格時屏幕閱讀器分開讀出價格相關信息導致無障礙用戶無法明確獲取準確的價格信息，也存在一些裝飾性的圖片獲得焦點從而讀出內容給無障礙用戶帶來較差的購物體驗。接下來的內容將針對H5無障礙開發進行。

ARIA

ARIA是什麼？

ARIA是W3C的Web無障礙推進組織發佈的可訪問富互聯網應用實現指南，主要針對的是視覺缺陷，失聰，行動不便的殘疾人以及假裝殘疾的測試人員。尤其像盲人，眼睛看不到，其瀏覽網頁則需要藉助輔助設備，如屏幕閱讀器，屏幕閱讀機可以大聲朗讀或者輸出盲文。而ARIA就是可以讓屏幕閱讀器準確識別網頁中的內容，變化，狀態的技術規範，可以讓盲人這類用戶也能無障礙閱讀！實際上ARIA 是對 HTML 語義化的補充。它具備比現有的 HTML 元素和屬性更完善的表達能力，並讓你頁面中元素的關係和含義更明確，HTML5已經開始使用ARIA，並且W3C發佈的很多其他標準也開始使用ARIA，ARIA 是一組特殊的易用性屬性，可以添加到任意標籤上。

爲什麼需要ARIA？

我們先考慮幾個問題：

如何讓盲人用戶知道當前瀏覽區域就是網站導航？
如何讓盲人用戶知道此處是可以點擊的？
如何讓盲人用戶知道點擊某個按鈕後有彈窗彈出？
如何讓盲人用戶知道你模擬的select控件是單選還是可以多選？
如何讓盲人用戶知道當你惦記了某個區域後頁面內容發生了變化？

在現有的知識範圍內我們如何解決這些問題呢？可能會想到HTML5，雖然HTML5增強了網頁的可訪問性和無障礙閱讀，但不是萬能的，對於解決無障礙用戶的一些問題上稍顯遜色，因此才需要ARIA。

ARIA瀏覽器支持

ARIA規範一直在更新維護，瀏覽器方面IE8+以及其他所有現代瀏覽器都都已支持ARIA, 幾乎可以說是全方位支持。流行的Bootstrap、JavaScript庫jQuery, 以及衍生的jQuery Mobile早早支持了ARIA。

ARIA組成

應用於HTML的ARIA由兩部分組成：**role** （角色）和帶 **aria-** 前綴的屬性，其作用：

role (角色)標識了一個元素的作用, 其實就是描述一個非標準的tag的實際作用，比如用div做button，那麼設置div 的 role="button"，輔助工具就可以認出這實際上是個button。
aria- 屬性描述了與之有關的事物（特徵）及其是什麼樣的（狀態）HTML中的ARIA，其實就是描述這個tag在可視化的情境中的具體信息

盲人是如何使用手機的？

Android ? TalkBack

單指觸摸：聚焦到觸摸的項目並朗讀
單指左右滑動（輕掃）：聚焦到當前焦點項目的前一個或後一個元素，並朗讀
單指向右滑動/左滑動：從上到下朗讀/從下到上朗讀
單指雙擊（屏幕任意位置）：激活當前聚焦的項目
雙指上下/左右滑動：上下/左右翻頁（以頁爲單位），需先聚焦到可翻頁的項目位置

iOS - VoiceOver

單指觸摸：聚焦到觸摸的項目並朗讀
單指左右滑動（輕掃）：聚焦到當前焦點項目的前一個或後一個元素，並朗讀
單指雙擊（屏幕任意位置）：激活當前聚焦的項目
三指上下/左右滑動：上下/左右翻頁（以頁爲單位），需先聚焦到可翻頁的項目位置

怎樣做好信息無障礙？

提供等效替代（文字或者語音來替代）

圖像的等效替代

移動端或Web端開發，都是用相應的文本信息等效替代圖像。（爲圖像添加描述性信息，並不是文本越長越好）

避免添加額外的、無意義、無價值信息的圖像
避免使用圖像來表現文本（也就是文字圖片）
爲圖像提供替代文本
裝飾性圖像應該可以被輔助技術忽略（非文字圖片）

驗證碼的等效替代

驗證碼不僅有圖形和聲音，也有手機驗證碼、數學計算驗證碼等其他類型。部署驗證碼時，需要至少考慮兩種驗證碼，以幫助感官功能缺失的障礙羣體可以替代使用。

音視頻的等效替代

顏色的等效替代

在設計中，應該考慮使用足夠清晰的對比度，幫助這部分色盲用戶，但是不僅是色盲用戶需要這類設計，友好的對比度能夠幫助他們更好地閱讀內容。
在WCAG2.0等級AA中對比度有明確的要求：文本的視覺呈現以及文本圖像至少有4.5:1的對比度。其公式如下：L1/L2 =4.5/1，L1是對比顏色中相對較亮的顏色，L2爲對比顏色中相對較暗的顏色。
如果面對的是全色盲用戶，可以考慮採用線條的粗細、線型、凹凸感或其他方式來對色彩進行等效替代。

用戶界面和導航可被輔助技術操作

功能可被輔助技術操作

作爲設計者來說，需要考慮如下兩點：

所有的功能可以被輔助技術訪問，比如讀屏軟件。
輔助技術操控時，不會陷入某個控件。

這樣做對於普通用戶也會有幫助，例如平板電腦，雖然只有虛擬鍵盤，但可以通過語音識別技術訪問某個應用。

充足的時間讀取和使用內容

一些人需要更多的時間輸入文字、理解內容、操作控件或者是完成某個任務。

除非是拍賣、考試等特定時間必須完成的內容，應該讓用戶可以停止、延長或者調整時間限制。
可以暫停、停止或隱藏移動、閃爍或滾動的內容，對於學習障礙、讀寫障礙人士來說，這些內容會分散注意力，打擾他們讀取內容。
用戶可以主動推遲或完全禁止、中斷，除非是緊急中斷，用戶發現某個錯誤，可以及時中斷，以避免造成不必要的法律、財產糾紛。

快速導航

內容的結構化越來越複雜，信息的體量也越來越大，對於大多數人來說，快速導航、查找內容以及快速定位自己在結構化內容中的位置，是非常好的用戶體驗。

清晰的標題，可以幫助用戶快速瞭解信息窗口中的大致內容。
可以快速地在一系列相似內容中找到所需內容。

例如通過淺層次的菜單目錄查找或者通過搜索引擎，快速找到自己所需要的信息內容，對於殘障用戶來說，減少了操作頻率，對於普通用戶，也是一種非常好的用戶體驗。

通過某種機制可以快速跳過重複的內容，幫助輔助工具快速找到主要內容。

由於輔助技術是線性地讀取內容，重複的內容和模塊，將消耗讀屏軟件用戶大量的時間。對於這類用戶，這些模塊是冗餘的信息，使用起來非常不便。

常見信息無障礙缺陷分類統計

最常見的無障礙缺陷是替代文本（標籤）問題和焦點問題，其中焦點問題又大量集中在焦點冗餘與焦點缺失上。只要解決好標籤問題和焦點冗餘、缺失，互聯網產品的無障礙化就成功了一大半。

讀屏軟件讀什麼？

要想學開車我們需要先了解車的啓動方式，所以要想真正的做好信息無障礙，我們需要知道讀屏軟件的工作方式，要做到“知己知彼”。

例如使用了 a 標籤製作了按鈕，如果不進行額外的優化，讀屏軟件在朗讀時會 讀作"文字內容鏈接" ，但實際上該 a 標籤是用作按鈕使用，因此可以在標籤上添加 role="button" 屬性。此時，讀屏軟件會 讀作"文字內容按鈕" 。可以看到， 讀屏軟件在朗讀時會在結尾朗讀出元素的屬性， 這也是無障礙優化中重要的一環。無障礙優化就是要解決如何使得元素的屬性被正確識別，如何使得元素的內容被清晰準確地朗讀，如何排除干擾元素等問題。

0 1

Android和iOS表現

在實踐中發現，同一內容在Android和ios上讀法存在不同的表現，屬性在不同的機型和系統上存在一定的差異。

Dom的順序很重要

讀屏軟件在 讀屏時默認按照 DOM 的順序朗讀 ，因此如果 DOM 的順序與內容的語義順序不一致，例如使用了 flex-direction: row-reverse; 使得內容的順序倒序顯示，會使得內容難以理解。因此儘量避免使用會影響到 DOM 視覺順序的樣式，如果無法避免，需要手動設置 tabIndex 屬性，告知讀屏軟件正確的內容順序。

爲非文本元素提供文本說明

關於Image

圖片或者動畫均需提供 alt 信息，對於某些用於裝飾性的圖片，則需設置 alt 爲空，使得讀屏軟件可以忽略此元素。如圖用於裝飾頁頭的圖片，實際並沒有傳遞有價值的信息。對於圖表文件，alt 屬性的設置則需要簡明扼要的表達出圖表的信息，並不用把裏面的細節都詳細得描述出來

<img> 標籤需要加上 alt 屬性，讀屏軟件會自動讀出 alt 的內容，例如 alt 內容爲"一個桌子"，那麼會被讀作"一個桌子圖像"。如果沒有添加 alt 屬性，那麼僅會讀作"圖像"，視障用戶會完全無法理解其實際含義。但是，當 <img> 標籤出現在 <a> 標籤內部，作爲一個圖像鏈接時，對於放在鏈接裏面的圖片，如果已經有文字的說明，alt 也設置爲空，這樣避免讀屏軟件重複同樣的內容。如下面的 HTML：

Apple iPhone

</a>

a的內容已經指明瞭這是個蘋果手機，img 的 alt屬性就沒必要再設置一次了。否則讀屏軟件會連續讀兩次重複的內容，引起混亂。

關於視頻

與上面的 <img> 標籤相似，<video> 標籤需要加上 title 屬性，例如 title 內容爲"一棵樹"，那麼會被讀作“一棵樹視頻”。

使用語義化標籤

語義化的 HTML 標籤，例如：

1、使用語義化的標籤，主要影響兩個方面：

選中元素時是否會整塊選中
朗讀時結尾會加上怎樣的修飾詞

2、標籤修飾符讀法

<header> 讀作"xxx 橫幅標誌性內容"。
<footer> 讀作"xxx 頁腳標誌性內容"。
<nav> 讀作"xxx 導航標誌性內容"。
<section> 僅讀作"xxx"，沒有結尾修飾詞。
<main> 讀作"xxx 主要標誌性內容"。
<aside> 讀作"xxx 補充標誌性內容"。
<button> 讀作"xxx 按鈕"。
<a> 讀作"xxx 鏈接"。

實際上，在瀏覽器內部，使用語義化標籤會隱式加上特定的 role 屬性，最後朗讀時的結尾修飾詞也正是這些 role 屬性的值以及分類，其他 role 的值朗讀時也可以以此類推，而以上標籤與 role 屬性具體對應的關係如下：

使用aria標籤向不存在原生語義的元素添加語義

aria-label="screen reader only label"，用於添加朗讀時的描述，讀屏時會讀出其中的內容，而忽略標籤的原有的文字，例如爲 a 標籤同時添加 role="button" 和 aria-label="另外的按鈕描述"，最終會朗讀成 "另外的按鈕描述按鈕"。

aria-controls="main"，用於給操作按鈕關聯控制區域，VoiceOver 上這個屬性沒有任何作用，但 PC 讀屏軟件中，添加了該屬性後，可以把焦點從按鈕快速移動到被控制區域。

aria-live="true"，添加了該屬性的元素，在其內容發生變化時，讀屏軟件會自動讀出變化後的新內容。可以用於會動態刷新的元素，例如發現商品信息上的“XXX人已收藏”，用於監聽實時變化的數據。

空格的使用

在實際開發中我們可能會遇到一種情況例如：招商銀行卡（9326），讀屏軟件讀屏的時候會讀爲“招商銀行卡九千三百二十六”但是這個並不是盲人用戶期待聽到的，或者讀爲“招商銀行卡九三四六”會更合適，所以我們要如何處理呢？有兩種想法

第一種：將9346這幾個“數字”分別替換成“中文”，但是需要注意的就是因爲銀行卡號哪個數字都有可能，所以我們需要做一個數字和中文的映射。
第二種：在9326這幾個數字中間分別加一個空格，這樣因爲每個數字都不挨着，中間有一個看不見的空格，所以讀屏軟件在讀屏的時候就不會讀成“九千三百二十六”而是“九三四六”。

中文的使用

在某些情況下如果有些讀法不對可以替換爲中文

隱藏當前屏幕不可見元素

在實際開發中存在一種情況，就是開啓無障礙，使用快捷手勢操作的時候將彈窗中的內容讀出來了。解決辦法就是首先我們要確認的就是彈窗內容已通過 display: none 或 visibility: hidden 隱藏（包括浮動出現的 alert 和 banner 等），如沒有隱藏，讀屏軟件仍會讀出元素內容，但屏幕外的元素通常不希望被讀出，如果不方便使用樣式進行隱藏，可以爲元素添加 aria-hidden="true" 屬性，元素則會被讀屏軟件忽略。

總結

無障礙體現了語義化的重要性，這正是語義化的意義之一，方便屏幕閱讀器閱讀，要想做好無障礙我們必須要了解屏幕閱讀器的工作原理，在這個前提下通過使用aria的語法規則相信我們會爲無障礙用戶帶來更好的購物體驗。