H5無障礙技術——ARIA
作者 | 張婷婷，單位：中國移動智慧家庭運營中心
?Labs 導讀
2020 年末，工信部印發《互聯網應用適老化及無障礙改造專項行動方案》通知，并把適老化及無障礙改造水平評測和企業信用評價納為重點工作，在國家的大力倡導下，我們更應該要關注互聯網應用的無障礙訪問。
全國現有 8500 多萬殘障人士，2 億多 60 歲以上的老年人，還有隱藏在人群中的大量有障礙人士。和家親擁有著大量的用戶群體，我們要提高用戶的無障礙體驗，讓他們也能共享便捷操作，就必須要加大互聯網無障礙訪問在我們產品中的應用。公平無差別的對待每一位用戶，增強信息獲取無障礙應該成為我們產品的一部分，這也會使得我們產品變得更加人性化。
使用無障礙訪問的人并不完全都是殘障人士，有可能是所處環境不方便比如說手受傷了，眼鏡丟了，弱視，或者在光線很強的場景下等情境限制下，也有可能是用戶的硬件出現了故障，比如鼠標壞了等等。這時候可以借助無障礙方式訪問，方便用戶快捷的使用。
1如何開啟無障礙模式
首先，了解下常見的讀屏軟件，如下列表：
移動端：
- Android: TalkBack
- Android: Funtouch
- iPhone: VoiceOver
桌面端：
- Windows: NVDA, JAWS
- Chrome: ChromeVox
- OSX: VoiceOver
在開啟屏幕閱讀器或者讀屏軟件訪問的時候，可以在用戶選中的地方進行語言播放，它會告訴用戶現在點中的是什么，可以有哪些操作。通過信息化手段彌補身體機能、所處環境等存在的差異，使任何人（無論是健全人還是殘疾人，無論是年輕人還是老年人）都能平等、方便、安全地獲取、交互、使用信息，實現了信息傳遞無障礙。
1.1 iOS如何開啟無障礙模式
首先我們在設置中找到輔助功能，然后打開旁白，也可以喊Siri出來打開旁白，這樣對盲人來說更方便。
圖1 iOS的輔助功能
1.2 安卓如何開啟無障礙模式
以小米手機為例開啟屏幕閱讀器，設置=>更多設置=>無障礙=>TalkBack。借用 TalkBack 來去讀屏幕的內容
圖2 安卓的輔助功能
1.3 瀏覽器端
首先需要開啟瀏覽器的無障礙訪問，以谷歌瀏覽器為例：谷歌瀏覽器=>設置=>高級=>無障礙=>開啟短暫突出顯示焦點對象/使用文本光標瀏覽網頁
當開啟設置之后，可以發現所有可以聚焦的地方都有一個很明顯的聚焦狀態如圖所示??
圖3 瀏覽器端的輔助功能
再來假設一個場景，鼠標和觸控板壞了，我們只有鍵盤，在這種情況下，是否還能正常的訪問頁面？經過操作發現我們可以借助鍵盤的tab進行頁面大多數的操作，幾乎沒有被影響。
2ARIA
2.1 ARIA
Accessible Rich Internet Applications（WAI-ARIA，簡稱 ARIA）指無障礙網頁應用技術，它是W3C的Web無障礙推進組織(Web Accessibility Initiative / WAI)在2014年3月20日發布的可訪問富互聯網應用實現指南。
WAI-ARIA是一個為殘疾人士等提供無障礙訪問動態、可交互Web內容的技術規范。在WAI-ARIA概述中對WAI-ARIA及其他支持文檔進行了介紹。
簡單點描述：
ARIA是W3C的一個獨立規范，幫助Web應用程序和Web頁面變得更具可訪問性
ARIA主要是為了提升網頁的可用性，網頁對殘疾人士的無障礙化
HTML5已經開始使用ARIA，并且W3C發布的很多其他標準也開始使用ARIA
ARIA是對HTML語義化的補充。它具備比現有的HTML元素和屬性更完善的表達能力，并讓你頁面中元素的關系和含義更明確
ARIA規范為瀏覽器和解析HTML文檔的輔助性技術提供了一種可以讓人們以多種方式訪問和使用 Web 的標準方法
Firefox、Safari 4.0、Google 早已支持WAI-ARIA，IE8部分支持，現在新版瀏覽器基本都支持。你可以通過：can i use網站查詢H5及CSS3兼容性。
應用于HTML的ARIA總共有3大部分組成，：**role**（角色）、帶**aria屬性**和aria狀態屬性，其作用：
- role(角色)標識了一個元素的作用
- aria屬性描述了與之有關的事物（特征）
- aria狀態屬性描述了是什么樣的（狀態）
2.2 在HTML中使用ARIA的規則
2.2.1 ARIA使用規則一
HTML5提供了許多語義化標簽，如button、nav；而不是使用無語義化元素并添加role和aria使其可訪問。所以，我們應該盡可能使用 HTML 語義化標簽來代替自己定義。
2.2.2 ARIA使用規則二
盡量不要用role屬性來改變語義化標簽的角色，除非你非要這么做。
如果頁面上使用了一個非語義化元素，要使用ARIA添加語義提示、并且要添加交互行為。
2.2.3 ARIA使用規則三
交互式ARIA元素都必須具有可操作事件。
在元素上使用role屬性并不足以真正改變元素的角色。例如，如果將一個div使用role=“button”設置成按鈕，但是我們必須還要為其添加交互事件。
2.2.4 ARIA使用規則四
不要在可交互元素的外層添加role=presentation或 aria-hidden="true"。這樣會導致里面的可交互元素無法獲取元素焦點，無法觸發事件。ARIA role="presentation" 屬性表示元素僅用于視覺目的，不進行交互。aria-hidden="true" 屬性表示元素不會被聚焦，對讀屏器是不可見的。
如果有些元素我們不希望被聚焦到，那么可以使用aria-hidden。
2.2.5 ARIA使用規則五
所有交互元素都必須有一個操作提示文字，說明操作目的。可以根據元素的類型指定元素的可訪問名稱。例如，表單可以從相應的label元素獲取其可訪問的名稱。其他元素，例如按鈕和鏈接，可以從它們的文本內容或標簽屬性中獲得它們的可訪問名稱。
3移動端H5無障礙適配方案
3.1 基本適配
給每一個img圖片元素添加alt屬性；按鈕使用button或者role增加可操作提示；導航鏈接可以使用nav標簽包裹，當焦點進入導航鏈接，屏幕閱讀器就能朗讀導航區域；表單輸入框使用label標簽，最好再加一個placeholder，不建議使用其它標簽來模擬單選框和復選框，其它標簽屏幕閱讀器無法朗讀選中狀態。兼容老瀏覽器可以給input 輸入框和鏈接加入title；使用aria-label屬性可以給元素添加自定義提示文字。
3.2 卡片容器合并成一個焦點
卡片容器由單獨聚焦，優化為合并成一個焦點，如商品卡片有圖片、文字、“￥”、價格數字分別聚焦，焦點冗余。優化后整個框做一個焦點，讀出：商品+商品名稱+價格 按鈕 點按兩次即可激活。
3.3 彈窗彈出時，自動聚焦元素
使用role="dialog"讓瀏覽器告訴屏幕閱讀器打開了一個彈窗；設置彈窗aria-modal="true"使彈窗以外的元素無法被聚焦（android上不生效）；android上要使用tabindex="-1讓對話框可以聚焦但無法被tab訪問；aria-label="" 或 aria-labelledby="xx元素id"來指定元素朗讀的內容。
焦點問題在Android不生效，解決方案有兩種：一是使用a鏈接或直接改hash。原理是用錨點來指定位置。會導致在瀏覽器會話歷史中新增一條記錄，需要在關閉彈窗的時候history.back()或者history.go(-1)，或者使用js，直接修改hash值。二是使用focus實現，同時需要結合aria-live屬性。
3.4 打開彈窗后，不可聚焦到底層組件
對于有半透明蒙層（opacity<1）的彈窗，安卓不會聚焦到底層組件，但是ios會聚焦到；對于無半透明蒙層的，都會聚焦到底層組件；動態設置：aria-hidden屬性禁止元素聚焦，當彈窗彈起的時候，我們給底層元素設置禁止聚焦，彈窗關閉的時候設置允許聚焦。
3.5 輸入框值變化時增加反饋
aria-live表示元素內容變化時對用戶進行提醒，絕大多數的更新應該在用戶閑暇的時候告知，即時提示對用戶是一種干擾。如果希望內容完全更新后再提示，可以使用aria-busy。
3.6 數字在不同環境下的讀法
<html> 數字發音會念成英文，需改成中文語言 zh-CN、zh-Hans-CN或zh-cmn-Hans；數字和字母一起出現（如：66GB）時，無障礙會讀“六六GB”；數字和漢字一起出現（如：100元）時，無障礙會讀“一百元”；手機號會讀成一整串數字，xxx億xxx千...；“-”減號會被讀城破折號,￥會被讀成日元符號；無法朗讀英文，只會讀出一個個字母。針對這些情況，可以使用將阿拉伯數字轉成中文數字，放入aria-label，自定義設置提示文本。
4總結
目前國內的web網站、移動端H5對無障礙的重視程度遠遠不夠。但是我們只要按照相關的標準來開發，無障礙適配開發其實很簡單。畢竟讓每一個人受益的科技，才是真正強大的科技。
