歡迎來到 IT 之家學(xué)院，這里是無障礙實驗室。時隔一月，再次與大家見面，我感到非常愉快。今天，我們來一起探討替代文本的相關(guān)問題。
長久以來，視障用戶都是在屏幕閱讀器的輔助下，才得以趕上互聯(lián)網(wǎng)大潮，進(jìn)而享受到互聯(lián)網(wǎng)帶來的紅利。這一切都建立在互聯(lián)網(wǎng)產(chǎn)品與屏幕閱讀器具有良好兼容性的基礎(chǔ)上。體現(xiàn)最明顯的一點便是：產(chǎn)品各功能性組件應(yīng)確保具有可讀性較高的文本型標(biāo)簽。如若不然，依托文本合成語音的屏幕閱讀器也只好表示愛莫能助了，只能干巴巴的讀出“未加標(biāo)簽”來安慰一下你那孤寂的靈魂。
互聯(lián)網(wǎng)的早期時代，受限于網(wǎng)絡(luò)傳輸能力，絕大多數(shù)產(chǎn)品都十分體面地通過文字來呈現(xiàn)內(nèi)容，因此無障礙問題暴露得并不明顯。而伴隨互聯(lián)網(wǎng)基礎(chǔ)建設(shè)的日趨完善，網(wǎng)絡(luò)邁進(jìn)高速發(fā)展的快車道，功能堆砌和設(shè)計花哨有了先決條件，一場場美化運動掀起一陣陣“血雨腥風(fēng)”，在普通用戶看來頂多算是有礙觀瞻，但對于視障用戶而言，那可真就是叫苦不迭了，他們只能苦哈哈地聽著一串又一串的“未加標(biāo)簽”勉強(qiáng)過活。
不過，任何事物的發(fā)展，無外乎從低級快速邁入高級，再由高級逐漸趨于完善，無障礙同樣遵循這個原則。在經(jīng)歷了早期的墾荒時代后，終于迎來了希望的曙光。就在 2020 年 12 月 24 日，工業(yè)和信息化部下發(fā)了《互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項行動方案》，方案的總體要求強(qiáng)調(diào)：針對視障人士，應(yīng)解決按鈕標(biāo)簽和圖片信息不可讀的問題。
其中，按鈕標(biāo)簽和圖片信息均可通過替代文本的形式添加，同時也不會影響現(xiàn)有的視覺體驗。因此，為了讓更多的開發(fā)者能充分理解這一特性，我們特此撰寫了這篇文章，希望能對大家?guī)硇┰S幫助。
什么是替代文本？
替代文本，一種用于補(bǔ)充或替代非文本內(nèi)容的文字性說明，可編程式地提供或從現(xiàn)有文本中引用，通常用于為非文本控件創(chuàng)建標(biāo)簽，或為非裝飾性內(nèi)容提供簡要描述，具有十分廣泛的應(yīng)用場景。
幾乎所有的語言都支持替代文本。例如，HTML 規(guī)定 img 標(biāo)簽必須提供的 alt 屬性，它可在瀏覽器無法顯示圖像時輸出文字信息，更重要的，這些文字信息有助于屏幕閱讀器用戶清晰直觀地了解圖像內(nèi)容。又如為元素提供額外信息的 title 屬性，當(dāng)元素獲得鼠標(biāo)指針時彈出工具提示，但從某種角度上說，它并不能作為首選的文本替代方案。
事實上，由 HTML 5 原生控件構(gòu)建的頁面，其無障礙體驗是非常優(yōu)秀的。因其支持自定義控件而具有豐富的擴(kuò)展性，廣受開發(fā)者的認(rèn)可。W3C 為了使自定義控件能獲得與 HTML 5 原生控件相同的無障礙體驗，加強(qiáng)自定義控件的語義化支持，制定了 WAI-ARIA 技術(shù)規(guī)范。通過該項技術(shù)規(guī)范實施頁面開發(fā)，能最大限度地保障各類障礙人群的無障礙體驗。
在 WAI-ARIA 中，通過 aria-label 與 aria-labelledby 屬性為元素創(chuàng)建標(biāo)簽，從而達(dá)到替代文本的目的?！皹?biāo)簽”的信息應(yīng)當(dāng)是簡短而明了的，它是用戶最先獲取到的控件信息，有著超然的地位；當(dāng)標(biāo)簽無法準(zhǔn)確傳達(dá)控件的信息時，開發(fā)者可提供 aria-description 與 aria-describedby 屬性，為用戶提供更為詳細(xì)的內(nèi)容描述。
應(yīng)用 aria-label 創(chuàng)立替代文本
控件的標(biāo)簽不為文本型，或標(biāo)簽的文本沒有準(zhǔn)確傳達(dá)控件的目的，可使用替代文本提供更為明確的標(biāo)簽。例如，一個點擊發(fā)送“滑稽”表情的按鈕，它的標(biāo)簽由 emoji 表情組合而成，就像這樣：
<button>????</button>
絕大多數(shù)的屏幕閱讀器支持 emoji 表情的朗讀，但這并不意味著所有用戶能理解這個組合表情。因此，我們通過替代文本來告知用戶，它具有“滑稽”的含義。
<button aria-label="滑稽">????</button>
如你所見，aria-label 屬性中填充的字符串即為替代文本。在本例中，屏幕閱讀器將朗讀為“滑稽 按鈕”，及 aria-label 的值與元素類型被讀出，控件的 innerText 則被忽略。所以，我們可以很快得出，當(dāng) aria-label 與 innerText 同時存在時，aria-label 的優(yōu)先級高于 innerText 。
當(dāng)你考慮好一切，決定使用 aria-label 時，請確保填寫了恰當(dāng)?shù)闹?。切忌將其設(shè)為空值，這雖然不影響屏幕閱讀器獲取 innerText 的信息，但并不能保障所有的屏幕閱讀器都能良好兼容。尤為重要的，控件中 innerText 已經(jīng)明確傳達(dá)含義了的，無需額外提供替代文本，除非開發(fā)者認(rèn)為替代文本具有更精準(zhǔn)的表達(dá)。
通過 aria-labelledby 關(guān)聯(lián)標(biāo)簽
從 aria-labelledby 這一屬性名稱上不難察覺，該屬性可用于為控件關(guān)聯(lián)替代文本。換言之，dom 中若存在可用的文本，即可通過該屬性引用文本的元素 id ，使其作為控件的替代文本。令人贊嘆的是，該屬性還可關(guān)聯(lián)多個元素 id ，而你僅需將元素 id 按從左到右的順序依次排列，并用空格分割，aria-labelledby 將逐一創(chuàng)建關(guān)聯(lián)，并按照你規(guī)定的順序朗讀。
例如，一個支持輸入頁碼后跳轉(zhuǎn)頁面的編輯框，它所擁有的標(biāo)簽被拆分成了若干個元素，我們就可通過 aria-labelledby 這樣的神仙屬性來關(guān)聯(lián)，而不再需要費勁巴力的通過 aria-label 手動填寫了。
<span id="numero"> 第 </span> <input type="text" id="input" value="1" aria-labelledby="numero input page total" /> <span id="page"> 頁 </span> <span id="total"> 共 5 頁 </span>
當(dāng)用戶使用 tab 鍵聚焦至該編輯框時，屏幕閱讀器將朗讀為“第 1 頁 共 5 頁 可編輯文本 1”。顯然，“可編輯文本”前的內(nèi)容是我們關(guān)聯(lián)的標(biāo)簽，之后為輸入字段的 value 屬性值。如果沒有關(guān)聯(lián)標(biāo)簽，這樣的編輯框在屏幕閱讀器下會表現(xiàn)得十分糟糕，如何朗讀完全取決于瀏覽器與屏幕閱讀器的配合了。
細(xì)心的你或許已經(jīng)發(fā)現(xiàn)，我們將 input 的元素 id 一并加入到 aria-labelledby 中，還指定了它的出場順序，也正如你所看到的，value 的初始值被作為標(biāo)簽的一部分。這樣做的好處在于，視障用戶編輯字段時，能在標(biāo)簽上直接反饋輸入結(jié)果，進(jìn)一步加強(qiáng)了標(biāo)簽的語義化表達(dá)。
需要引起重視的是，aria-labelledby 遵循與 aria-label 同樣的原則，及確保關(guān)聯(lián)文本具有簡明扼要的標(biāo)簽意義。所不同的是，aria-labelledby 的優(yōu)先級高于 aria-label ，當(dāng)二者同時存在時，僅 aria-labelledby 生效，W3C 也更推崇使用 aria-labelledby 。當(dāng) DOM 中含有可用文本時，請通過 aria-labelledby 屬性關(guān)聯(lián)它，而并非手動填寫 aria-label ，除非開發(fā)者認(rèn)為后者的表現(xiàn)更為優(yōu)異。
更易于理解的描述性文本
在非常痛苦的閱讀了上述這些味同嚼蠟般的文字后，漸漸地拼湊出了一個脈絡(luò)，并決定改造自己維護(hù)的頁面，但沮喪的發(fā)現(xiàn)，仍有極個別頑固的組件無法準(zhǔn)確傳達(dá)含義，于是有人可能打算順著網(wǎng)線摸過來給筆者一頓老拳，我勸你想開些，畢竟本文還沒結(jié)束，中途下車的拒不退票。
在經(jīng)過上述步驟，仍然無法精準(zhǔn)傳達(dá)控件含義的，就可祭出終極大法，及 aria-description 與 aria-describedby 屬性。結(jié)合此前內(nèi)容，基本不再需要筆者展開敘述了。aria-description 與 aria-label 用法一致，可供開發(fā)者自定義的創(chuàng)建描述信息；aria-describedby 則與 aria-labelledby 對應(yīng)，可從 dom 中關(guān)聯(lián)可用文本。同樣地，描述性文本也具有優(yōu)先級，aria-describedby 的優(yōu)先級高于 aria-description ，因此 W3C 推薦使用 aria-describedby 。
事實上，我們只要類比 HTML 即可輕松的理解這些屬性。aria-label 與 aria-labelledby 更接近于元素的 innerText，具有標(biāo)簽的表現(xiàn)形式；而 aria-description 與 aria-describedby 類似于 HTML 的 title 屬性，有所差異的，aria-description 與 aria-describedby 的文本描述不具有 title 屬性的工具提示浮窗。
這仍然是一個發(fā)送“滑稽”表情的按鈕，只不過，我們加入了描述性文本，使用戶能更明確該按鈕的目的。
<button aria-label="滑稽" aria-description=" 點擊以發(fā)送“滑稽”表情 ">????</button>
此時，屏幕閱讀器將朗讀為“滑稽 按鈕 點擊以發(fā)送‘滑稽’表情”，目的和作用表達(dá)得都非常明確。但非常遺憾的是，該屬性并沒有在當(dāng)前流行的 WAI-ARIA 版本中定義，就目前而言，僅 chromium 和 Firefox 瀏覽器具有良好的支持，這也是更推薦使用 aria-describedby 屬性的根本原因吧。
仍然是這個頁碼編輯框，現(xiàn)在，加入了 aria-describedby 屬性，使它的易用性邁上了一個新的臺階。
<span id="pagination"> 頁碼：</span> <span id="numero"> 第 </span> <input type="text" id="input" value="2" aria-labelledby="pagination" aria-describedby="numero input page total" /> <span id="page"> 頁 </span> <span id="total"> 共 5 頁 </span>
經(jīng)過上述簡單修改，該編輯框在屏幕閱讀器下朗讀為“頁碼： 可編輯文本 2 第 2 頁 共 5 頁”，嘖嘖，多么明確的表達(dá)。
寫在文末
從本質(zhì)上講，筆者是一個嘴笨筆拙的人，拉拉雜雜的堆砌了這些文字，在通讀全文后，若確有疑惑存在的，歡迎在評論區(qū)留言，筆者會在評論區(qū)領(lǐng)教各位的刀法絕倫。
此后，筆者爭取以月更一篇的頻率，持續(xù)撰寫此類題材的文章。一來借助 IT 之家的聲望，向大眾普及一波信息無障礙；二來便于廣大開發(fā)者從這個專題中能夠汲取到相關(guān)經(jīng)驗；第三，也是最重要的，這將是筆者個人的一次技術(shù)總結(jié)，也磨練我的寫作能力吧。望大家一如既往的支持我們，支持無障礙，謝謝！
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。