作者 | 張婷婷，單位：中國(guó)移動(dòng)智慧家庭運(yùn)營(yíng)中心

?Labs 導(dǎo)讀

2020 年末，工信部印發(fā)《互聯(lián)網(wǎng)應(yīng)用適老化及無(wú)障礙改造專(zhuān)項(xiàng)行動(dòng)方案》通知，并把適老化及無(wú)障礙改造水平評(píng)測(cè)和企業(yè)信用評(píng)價(jià)納為重點(diǎn)工作，在國(guó)家的大力倡導(dǎo)下，我們更應(yīng)該要關(guān)注互聯(lián)網(wǎng)應(yīng)用的無(wú)障礙訪(fǎng)問(wèn)。

全國(guó)現(xiàn)有 8500 多萬(wàn)殘障人士，2 億多 60 歲以上的老年人，還有隱藏在人群中的大量有障礙人士。和家親擁有著大量的用戶(hù)群體，我們要提高用戶(hù)的無(wú)障礙體驗(yàn)，讓他們也能共享便捷操作，就必須要加大互聯(lián)網(wǎng)無(wú)障礙訪(fǎng)問(wèn)在我們產(chǎn)品中的應(yīng)用。公平無(wú)差別的對(duì)待每一位用戶(hù)，增強(qiáng)信息獲取無(wú)障礙應(yīng)該成為我們產(chǎn)品的一部分，這也會(huì)使得我們產(chǎn)品變得更加人性化。

使用無(wú)障礙訪(fǎng)問(wèn)的人并不完全都是殘障人士，有可能是所處環(huán)境不方便比如說(shuō)手受傷了，眼鏡丟了，弱視，或者在光線(xiàn)很強(qiáng)的場(chǎng)景下等情境限制下，也有可能是用戶(hù)的硬件出現(xiàn)了故障，比如鼠標(biāo)壞了等等。這時(shí)候可以借助無(wú)障礙方式訪(fǎng)問(wèn)，方便用戶(hù)快捷的使用。

1如何開(kāi)啟無(wú)障礙模式

首先，了解下常見(jiàn)的讀屏軟件，如下列表：

移動(dòng)端：

• Android: TalkBack
• Android: Funtouch
• iPhone: VoiceOver

桌面端：

• Windows: NVDA, JAWS
• Chrome: ChromeVox
• OSX: VoiceOver

在開(kāi)啟屏幕閱讀器或者讀屏軟件訪(fǎng)問(wèn)的時(shí)候，可以在用戶(hù)選中的地方進(jìn)行語(yǔ)言播放，它會(huì)告訴用戶(hù)現(xiàn)在點(diǎn)中的是什么，可以有哪些操作。通過(guò)信息化手段彌補(bǔ)身體機(jī)能、所處環(huán)境等存在的差異，使任何人（無(wú)論是健全人還是殘疾人，無(wú)論是年輕人還是老年人）都能平等、方便、安全地獲取、交互、使用信息，實(shí)現(xiàn)了信息傳遞無(wú)障礙。

1.1 iOS如何開(kāi)啟無(wú)障礙模式

首先我們?cè)谠O(shè)置中找到輔助功能，然后打開(kāi)旁白，也可以喊Siri出來(lái)打開(kāi)旁白，這樣對(duì)盲人來(lái)說(shuō)更方便。

圖1 iOS的輔助功能

1.2 安卓如何開(kāi)啟無(wú)障礙模式

以小米手機(jī)為例開(kāi)啟屏幕閱讀器，設(shè)置=>更多設(shè)置=>無(wú)障礙=>TalkBack。借用 TalkBack 來(lái)去讀屏幕的內(nèi)容

圖2 安卓的輔助功能

1.3 瀏覽器端

首先需要開(kāi)啟瀏覽器的無(wú)障礙訪(fǎng)問(wèn)，以谷歌瀏覽器為例：谷歌瀏覽器=>設(shè)置=>高級(jí)=>無(wú)障礙=>開(kāi)啟短暫突出顯示焦點(diǎn)對(duì)象/使用文本光標(biāo)瀏覽網(wǎng)頁(yè)

當(dāng)開(kāi)啟設(shè)置之后，可以發(fā)現(xiàn)所有可以聚焦的地方都有一個(gè)很明顯的聚焦?fàn)顟B(tài)如圖所示??

圖3 瀏覽器端的輔助功能

再來(lái)假設(shè)一個(gè)場(chǎng)景，鼠標(biāo)和觸控板壞了，我們只有鍵盤(pán)，在這種情況下，是否還能正常的訪(fǎng)問(wèn)頁(yè)面？經(jīng)過(guò)操作發(fā)現(xiàn)我們可以借助鍵盤(pán)的tab進(jìn)行頁(yè)面大多數(shù)的操作，幾乎沒(méi)有被影響。

2ARIA

2.1 ARIA

Accessible Rich Internet Applications（WAI-ARIA，簡(jiǎn)稱(chēng) ARIA）指無(wú)障礙網(wǎng)頁(yè)應(yīng)用技術(shù)，它是W3C的Web無(wú)障礙推進(jìn)組織(Web Accessibility Initiative / WAI)在2014年3月20日發(fā)布的可訪(fǎng)問(wèn)富互聯(lián)網(wǎng)應(yīng)用實(shí)現(xiàn)指南。

WAI-ARIA是一個(gè)為殘疾人士等提供無(wú)障礙訪(fǎng)問(wèn)動(dòng)態(tài)、可交互Web內(nèi)容的技術(shù)規(guī)范。在WAI-ARIA概述中對(duì)WAI-ARIA及其他支持文檔進(jìn)行了介紹。

簡(jiǎn)單點(diǎn)描述：

• ARIA是W3C的一個(gè)獨(dú)立規(guī)范，幫助Web應(yīng)用程序和Web頁(yè)面變得更具可訪(fǎng)問(wèn)性

• ARIA主要是為了提升網(wǎng)頁(yè)的可用性，網(wǎng)頁(yè)對(duì)殘疾人士的無(wú)障礙化

• HTML5已經(jīng)開(kāi)始使用ARIA，并且W3C發(fā)布的很多其他標(biāo)準(zhǔn)也開(kāi)始使用ARIA

• ARIA是對(duì)HTML語(yǔ)義化的補(bǔ)充。它具備比現(xiàn)有的HTML元素和屬性更完善的表達(dá)能力，并讓你頁(yè)面中元素的關(guān)系和含義更明確

• ARIA規(guī)范為瀏覽器和解析HTML文檔的輔助性技術(shù)提供了一種可以讓人們以多種方式訪(fǎng)問(wèn)和使用 Web 的標(biāo)準(zhǔn)方法

• Firefox、Safari 4.0、Google 早已支持WAI-ARIA，IE8部分支持，現(xiàn)在新版瀏覽器基本都支持。你可以通過(guò)：can i use網(wǎng)站查詢(xún)H5及CSS3兼容性。

應(yīng)用于HTML的ARIA總共有3大部分組成，：**role**（角色）、帶**aria屬性**和aria狀態(tài)屬性，其作用：

• role(角色)標(biāo)識(shí)了一個(gè)元素的作用
• aria屬性描述了與之有關(guān)的事物（特征）
• aria狀態(tài)屬性描述了是什么樣的（狀態(tài)）

2.2 在HTML中使用ARIA的規(guī)則

2.2.1 ARIA使用規(guī)則一

HTML5提供了許多語(yǔ)義化標(biāo)簽，如button、nav；而不是使用無(wú)語(yǔ)義化元素并添加role和aria使其可訪(fǎng)問(wèn)。所以，我們應(yīng)該盡可能使用 HTML 語(yǔ)義化標(biāo)簽來(lái)代替自己定義。

2.2.2 ARIA使用規(guī)則二

盡量不要用role屬性來(lái)改變語(yǔ)義化標(biāo)簽的角色，除非你非要這么做。

如果頁(yè)面上使用了一個(gè)非語(yǔ)義化元素，要使用ARIA添加語(yǔ)義提示、并且要添加交互行為。

2.2.3 ARIA使用規(guī)則三

交互式ARIA元素都必須具有可操作事件。

在元素上使用role屬性并不足以真正改變?cè)氐慕巧＠?，如果將一個(gè)div使用role=“button”設(shè)置成按鈕，但是我們必須還要為其添加交互事件。

2.2.4 ARIA使用規(guī)則四

不要在可交互元素的外層添加role=presentation或 aria-hidden="true"。這樣會(huì)導(dǎo)致里面的可交互元素?zé)o法獲取元素焦點(diǎn)，無(wú)法觸發(fā)事件。ARIA role="presentation" 屬性表示元素僅用于視覺(jué)目的，不進(jìn)行交互。aria-hidden="true" 屬性表示元素不會(huì)被聚焦，對(duì)讀屏器是不可見(jiàn)的。

如果有些元素我們不希望被聚焦到，那么可以使用aria-hidden。

2.2.5 ARIA使用規(guī)則五

所有交互元素都必須有一個(gè)操作提示文字，說(shuō)明操作目的。可以根據(jù)元素的類(lèi)型指定元素的可訪(fǎng)問(wèn)名稱(chēng)。例如，表單可以從相應(yīng)的label元素獲取其可訪(fǎng)問(wèn)的名稱(chēng)。其他元素，例如按鈕和鏈接，可以從它們的文本內(nèi)容或標(biāo)簽屬性中獲得它們的可訪(fǎng)問(wèn)名稱(chēng)。

3移動(dòng)端H5無(wú)障礙適配方案

3.1 基本適配

給每一個(gè)img圖片元素添加alt屬性；按鈕使用button或者role增加可操作提示；導(dǎo)航鏈接可以使用nav標(biāo)簽包裹，當(dāng)焦點(diǎn)進(jìn)入導(dǎo)航鏈接，屏幕閱讀器就能朗讀導(dǎo)航區(qū)域；表單輸入框使用label標(biāo)簽，最好再加一個(gè)placeholder，不建議使用其它標(biāo)簽來(lái)模擬單選框和復(fù)選框，其它標(biāo)簽屏幕閱讀器無(wú)法朗讀選中狀態(tài)。兼容老瀏覽器可以給input 輸入框和鏈接加入title；使用aria-label屬性可以給元素添加自定義提示文字。

3.2 卡片容器合并成一個(gè)焦點(diǎn)

卡片容器由單獨(dú)聚焦，優(yōu)化為合并成一個(gè)焦點(diǎn)，如商品卡片有圖片、文字、“￥”、價(jià)格數(shù)字分別聚焦，焦點(diǎn)冗余。優(yōu)化后整個(gè)框做一個(gè)焦點(diǎn)，讀出：商品+商品名稱(chēng)+價(jià)格 按鈕 點(diǎn)按兩次即可激活。

3.3 彈窗彈出時(shí)，自動(dòng)聚焦元素

使用role="dialog"讓瀏覽器告訴屏幕閱讀器打開(kāi)了一個(gè)彈窗；設(shè)置彈窗aria-modal="true"使彈窗以外的元素?zé)o法被聚焦（android上不生效）；android上要使用tabindex="-1讓對(duì)話(huà)框可以聚焦但無(wú)法被tab訪(fǎng)問(wèn)；aria-label="" 或 aria-labelledby="xx元素id"來(lái)指定元素朗讀的內(nèi)容。

焦點(diǎn)問(wèn)題在A(yíng)ndroid不生效，解決方案有兩種：一是使用a鏈接或直接改hash。原理是用錨點(diǎn)來(lái)指定位置。會(huì)導(dǎo)致在瀏覽器會(huì)話(huà)歷史中新增一條記錄，需要在關(guān)閉彈窗的時(shí)候history.back()或者h(yuǎn)istory.go(-1)，或者使用js，直接修改hash值。二是使用focus實(shí)現(xiàn)，同時(shí)需要結(jié)合aria-live屬性。

3.4 打開(kāi)彈窗后，不可聚焦到底層組件

對(duì)于有半透明蒙層（opacity<1）的彈窗，安卓不會(huì)聚焦到底層組件，但是ios會(huì)聚焦到；對(duì)于無(wú)半透明蒙層的，都會(huì)聚焦到底層組件；動(dòng)態(tài)設(shè)置：aria-hidden屬性禁止元素聚焦，當(dāng)彈窗彈起的時(shí)候，我們給底層元素設(shè)置禁止聚焦，彈窗關(guān)閉的時(shí)候設(shè)置允許聚焦。

3.5 輸入框值變化時(shí)增加反饋

aria-live表示元素內(nèi)容變化時(shí)對(duì)用戶(hù)進(jìn)行提醒，絕大多數(shù)的更新應(yīng)該在用戶(hù)閑暇的時(shí)候告知，即時(shí)提示對(duì)用戶(hù)是一種干擾。如果希望內(nèi)容完全更新后再提示，可以使用aria-busy。

3.6 數(shù)字在不同環(huán)境下的讀法

<html> 數(shù)字發(fā)音會(huì)念成英文，需改成中文語(yǔ)言 zh-CN、zh-Hans-CN或zh-cmn-Hans；數(shù)字和字母一起出現(xiàn)（如：66GB）時(shí)，無(wú)障礙會(huì)讀“六六GB”；數(shù)字和漢字一起出現(xiàn)（如：100元）時(shí)，無(wú)障礙會(huì)讀“一百元”；手機(jī)號(hào)會(huì)讀成一整串?dāng)?shù)字，xxx億xxx千...；“-”減號(hào)會(huì)被讀城破折號(hào),￥會(huì)被讀成日元符號(hào)；無(wú)法朗讀英文，只會(huì)讀出一個(gè)個(gè)字母。針對(duì)這些情況，可以使用將阿拉伯?dāng)?shù)字轉(zhuǎn)成中文數(shù)字，放入aria-label，自定義設(shè)置提示文本。

4總結(jié)

目前國(guó)內(nèi)的web網(wǎng)站、移動(dòng)端H5對(duì)無(wú)障礙的重視程度遠(yuǎn)遠(yuǎn)不夠。但是我們只要按照相關(guān)的標(biāo)準(zhǔn)來(lái)開(kāi)發(fā)，無(wú)障礙適配開(kāi)發(fā)其實(shí)很簡(jiǎn)單。畢竟讓每一個(gè)人受益的科技，才是真正強(qiáng)大的科技。