【W(wǎng)eb技術(shù)】Web 可訪問性與無障礙最佳實(shí)踐

Web 無障礙開發(fā)知識(shí)

對(duì)于 Web 開發(fā)者來說，可以通過調(diào)整 HTML 的結(jié)構(gòu)和標(biāo)簽，增加 HTML 屬性，配合 CSS 和 JavaScript 等手段來提高頁面的可訪問性和無障礙性。例如使用了 a 標(biāo)簽制作了按鈕，如果不進(jìn)行額外的優(yōu)化，讀屏軟件在朗讀時(shí)會(huì)讀作"文字內(nèi)容 鏈接"，但實(shí)際上該 a 標(biāo)簽是用作按鈕使用，因此可以在標(biāo)簽上添加 role="button" 屬性。此時(shí)，讀屏軟件會(huì)讀作"文字內(nèi)容 按鈕"。

可以看到，讀屏軟件在朗讀時(shí)會(huì)在結(jié)尾朗讀出元素的屬性，這也是無障礙優(yōu)化中重要的一環(huán)。無障礙優(yōu)化就是要解決如何使得元素的屬性被正確識(shí)別，如何使得元素的內(nèi)容被清晰準(zhǔn)確地朗讀，如何排除干擾元素等問題。在了解 WeRead H5 的無障礙優(yōu)化處理之前，首先需要了解 Web 無障礙開發(fā)的基礎(chǔ)知識(shí)，及讀屏軟件的工作方式（以 Apple VoiceOver 為例），可以參考以下資料：

• 頁面無障礙基礎(chǔ)知識(shí)：Accessible Rich Internet Applications (WAI-ARIA) 1.1

• 無障礙教程：可訪問性 - 學(xué)習(xí) Web 開發(fā) | MDN

• 讀屏軟件的使用：VoiceOver - iPhone 使用手冊(cè)

WeRead H5 的開發(fā)細(xì)則

我們參考 WCAG 2.1，在微信讀書 H5 項(xiàng)目中總結(jié)了一些無障礙開發(fā)的最佳實(shí)踐。

DOM 的順序很重要

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

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

圖像使用 alt 屬性描述圖像內(nèi)容

<img> 標(biāo)簽需要加上 alt 屬性，讀屏軟件會(huì)自動(dòng)讀出 alt 的內(nèi)容，例如 alt 內(nèi)容為"一只目光洶洶凝視遠(yuǎn)方的貓"，那么會(huì)被讀作"一只目光洶洶凝視遠(yuǎn)方的貓 圖像"。如果沒有添加 alt 屬性，那么僅會(huì)讀作"圖像"，視障用戶會(huì)完全無法理解其實(shí)際含義。

但是，當(dāng) <img> 標(biāo)簽出現(xiàn)在 <a> 標(biāo)簽內(nèi)部，作為一個(gè)圖像鏈接時(shí)，應(yīng)在 <a> 上使用 title 屬性，<img> 標(biāo)簽可不加 alt 屬性。

視頻使用 title 屬性

與上面的 <img> 標(biāo)簽相似，<video> 標(biāo)簽需要加上 title 屬性，例如 title 內(nèi)容為"一只正在奔跑的貓"，那么會(huì)被讀作一只正在奔跑的貓 視頻"。

使用語義化的元素

盡量使用語義化標(biāo)簽

語義化的 HTML 標(biāo)簽，例如 <header> <footer> <nav> <section> <main> <aside> <button>，使用語義化的標(biāo)簽，主要影響兩個(gè)方面：

• 選中元素時(shí)是否會(huì)整塊選中

• 朗讀時(shí)結(jié)尾會(huì)加上怎樣的修飾詞

其中默認(rèn)設(shè)置下，目前僅 <button> 標(biāo)簽可以使得選中元素時(shí)會(huì)整塊選中，而不單獨(dú)選中子元素。至于修飾詞這里列舉具體的情況：

• <header> 讀作"xxx 橫幅 標(biāo)志性內(nèi)容"。

• <footer> 讀作"xxx 頁腳 標(biāo)志性內(nèi)容"。

• <nav> 讀作"xxx 導(dǎo)航 標(biāo)志性內(nèi)容"。

• <section> 僅讀作"xxx"，沒有結(jié)尾修飾詞。

• <main> 讀作"xxx 主要 標(biāo)志性內(nèi)容"。

• <aside> 讀作"xxx 補(bǔ)充 標(biāo)志性內(nèi)容"。

• <button> 讀作"xxx 按鈕"。

• <a> 讀作"xxx 鏈接"。

實(shí)際上，在瀏覽器內(nèi)部，使用語義化標(biāo)簽會(huì)隱式加上特定的 role 屬性，最后朗讀時(shí)的結(jié)尾修飾詞也正是這些 role 屬性的值以及分類，其他 role 的值朗讀時(shí)也可以以此類推，而以上標(biāo)簽與 role 屬性具體對(duì)應(yīng)的關(guān)系如下：

以上 role 屬性值的分類大多數(shù)都屬于標(biāo)志性內(nèi)容。

role 屬性

如果出于其他考慮，使用了非對(duì)應(yīng)語義的標(biāo)簽，例如開頭提到的使用 a 標(biāo)簽實(shí)現(xiàn)按鈕，就需要添加 role="button" 屬性來聲明這是一個(gè)按鈕。同理，其他類似情況也可以這樣處理，主要的就是影響朗讀時(shí)的修飾詞。

禁用狀態(tài)使用 disabled 屬性

使用特定的 class 來增加禁用態(tài)樣式是常見的手法，但由于 class 語義并不能被讀屏軟件識(shí)別，因此讀屏?xí)r無法知道當(dāng)前處于禁用態(tài)?？梢愿臑槭褂?disabled 屬性實(shí)現(xiàn)禁用態(tài)，例如：

<input type="search" name="q" placeholder="請(qǐng)輸入用戶名" aria-label="搜索用戶" disabled/>

/* 禁用態(tài)樣式 */
input[disabled] {
    opacity: .5;
}

會(huì)讀作 搜索用戶 請(qǐng)輸入用戶名 變暗 搜索欄，讀屏軟件會(huì)用"變暗"這個(gè)詞表示搜索欄處于不可用的狀態(tài)。而對(duì)于沒有 disabled 屬性的標(biāo)簽，例如 a 標(biāo)簽，可以使用 aria-disabled 屬性達(dá)到同樣的效果。

可使用 aria 標(biāo)簽向不存在原生語義的元素添加語義

• aria-label="screen reader only label"，用于添加朗讀時(shí)的描述，讀屏?xí)r會(huì)讀出其中的內(nèi)容，而忽略標(biāo)簽的原有的文字，例如為 a 標(biāo)簽同時(shí)添加 role="button" 和 aria-label="額外的按鈕描述"，最終會(huì)朗讀成"額外的按鈕描述 按鈕"。

• aria-controls="main"，用于給操作按鈕關(guān)聯(lián)控制區(qū)域，VoiceOver 上這個(gè)屬性沒有任何作用，但 PC 讀屏軟件中，添加了該屬性后，可以把焦點(diǎn)從按鈕快速移動(dòng)到被控制區(qū)域。

• aria-live="true"，添加了該屬性的元素，在其內(nèi)容發(fā)送變化時(shí)，讀屏軟件會(huì)自動(dòng)讀出變化后的新內(nèi)容。可以用于會(huì)動(dòng)態(tài)刷新的元素，例如發(fā)現(xiàn)卡片上的“XXX人參與活動(dòng)”，書城的換一批功能，用于監(jiān)聽實(shí)時(shí)變化的數(shù)據(jù)。實(shí)際效果可以參考這個(gè) demo。

• 更多屬性詳見：https://www.w3.org/TR/wai-aria/。

動(dòng)畫

可在 iOS 下通過 CSS 選擇器 @media(prefers-reduced-motion) 來針對(duì)開啟了“避免動(dòng)畫”的用戶取消動(dòng)畫。

隱藏屏幕外的元素

確保屏幕外的內(nèi)容已通過 display: none 或 visibility: hidden 隱藏（如浮動(dòng)出現(xiàn)的 alert 和 banner 等），如沒有隱藏，讀屏軟件仍會(huì)讀出元素內(nèi)容，但屏幕外的元素通常不希望被讀出，如果不方便使用樣式進(jìn)行隱藏，可以為元素添加 aria-hidden="true" 屬性，元素則會(huì)被讀屏軟件忽略。

常用場(chǎng)景

圖像的編寫

如上文所述，圖像需要補(bǔ)充文字描述，補(bǔ)充時(shí)需要使用具體的內(nèi)容標(biāo)題，例如書籍封面，可以使用書籍名稱，而不要直接統(tǒng)一描述為"書籍封面"，同理用戶頭像也應(yīng)該使用用戶名作為描述文字。

按鈕的編寫

在 H5 中，為了避免一些瀏覽器默認(rèn)樣式的干擾，以及制作點(diǎn)擊效果（具體原因），目前采用 a 標(biāo)簽實(shí)現(xiàn)。但從無障礙的角度考慮，a 標(biāo)簽?zāi)J(rèn)會(huì)被當(dāng)做鏈接處理，讀屏?xí)r會(huì)讀作"鏈接內(nèi)的文字 鏈接"。

基礎(chǔ)無障礙適配

需要加上 aria="button" 屬性，例如：

<a class="test_btn" role="button" href="javascript:;">文字</a>

讀屏?xí)r會(huì)讀出"文字 按鈕"。

增加描述文字

如果 a 標(biāo)簽內(nèi)本身沒有文字，例如以圖片、背景色和邊框制作的按鈕，還需要加上 aria-label="描述文字"，讀屏?xí)r會(huì)讀作"描述文字 按鈕"的形式。當(dāng) a 標(biāo)簽內(nèi)的文字對(duì)于視障人士不足以描述清楚按鈕作用時(shí)（例如需要結(jié)合上下的元素，或者結(jié)合按鈕本身的背景圖才能理解按鈕的含義時(shí)），也可以加上 aria-label 屬性，aria-label 的內(nèi)容會(huì)被優(yōu)先讀出，例如：

<a class="test_btn" role="button" href="javascript:;" aria-label="更完整的描述">文字</a>

多重標(biāo)簽嵌套

另外 a 標(biāo)簽內(nèi)容如果有嵌套的標(biāo)簽，并不會(huì)影響文字被讀出，例如：

<a class="test_btn" role="button" href="javascript:;">
    <span class="test_btn_inner">
        <span class="test_btn_inner_text">文字</span>
    </span>
</a>

讀屏?xí)r仍會(huì)讀出"文字 按鈕"。

整塊可點(diǎn)擊元素的編寫

在遇到 banner 等本身由多個(gè)子元素組成，但點(diǎn)擊時(shí)為整塊點(diǎn)擊的元素，需要分為兩種情況考慮：

使用 a 標(biāo)簽實(shí)現(xiàn)

如果使用了默認(rèn)的點(diǎn)擊效果，即使用了 a 標(biāo)簽實(shí)現(xiàn)外層框，讀屏?xí)r子元素會(huì)被分別選中，但實(shí)際上單獨(dú)讀出每個(gè)子元素不能表達(dá)按鈕整體的完整含義。因?yàn)椋覀兘ㄗh整塊當(dāng)作按鈕處理，但一般無需添加 aria-label，讓讀屏軟件直接按 DOM 順序讀出子元素的文字內(nèi)容即可，例如：

<a class="welcomeBonus_packet" href="javascript:;" role="button" @click="packetRedeem">
    <div class="welcomeBonus_packet_info">
        <div class="welcomeBonus_packet_info_title">主標(biāo)題內(nèi)容文字</div>
        <div class="welcomeBonus_packet_info_desc">描述文字</div>
    </div>
    <div class="welcomeBonus_packet_btn">
        <span>提示文字</span>
    </div>
</a>

會(huì)被讀作"主標(biāo)題內(nèi)容文字 描述文字 提示文字 按鈕"，視障人士會(huì)清楚這是整體點(diǎn)擊的按鈕，并且了解到其作用。如果部分內(nèi)容不希望被讀出來，精簡(jiǎn)朗讀文案的時(shí)長(zhǎng)，例如作用不大的輔助語句，可以單獨(dú)添加 aria-hidden="true"。

需要注意，可點(diǎn)擊元素點(diǎn)擊后跳轉(zhuǎn)頁面通常采用 role="link" 聲明，而點(diǎn)擊后進(jìn)行一些操作則通常采用 role="button" 聲明，讀屏的時(shí)候結(jié)尾分別為"鏈接"和"按鈕"，但本場(chǎng)景下建議統(tǒng)一使用 role="button"，因?yàn)?role="link" 并不會(huì)讓元素整塊被識(shí)別，實(shí)際體驗(yàn)上，整體識(shí)別能帶來更好的體驗(yàn)，而視障人士對(duì)于"鏈接"和"按鈕"的理解包容度也比較高。

使用語義化標(biāo)簽實(shí)現(xiàn)

如果無需使用默認(rèn)的點(diǎn)擊效果，建議使用語義化的標(biāo)簽實(shí)現(xiàn)外層框，例如 section、aside，這樣用戶在使用“container 模式”進(jìn)行讀屏?xí)r，元素會(huì)直接被整體識(shí)別，而不會(huì)單獨(dú)讀出子元素。

以 VoiceOver 為例，雙指旋轉(zhuǎn)可以調(diào)節(jié)焦點(diǎn)選擇的模式，”container 模式“下焦點(diǎn)僅會(huì)被 section 這類外層容器捕捉。

小程序注意事項(xiàng)

• 小程序中目前僅支持 aria-role（相當(dāng)于原生 Web 的 role）和 aria-label 兩個(gè)屬性，如果讀屏?xí)r需要忽略某些元素，無法使用 aria-hidden 來聲明，因此需要注意盡量讓無需被讀屏的元素不輸出 DOM。

• 小程序中沒有語義標(biāo)簽，因此整塊點(diǎn)擊的元素只能加上 aria-role="button"。