10月15日是第36個(gè)國(guó)際盲人節(jié)，在當(dāng)天，國(guó)內(nèi)外許多組織都舉行了相關(guān)活動(dòng)。而在IT之家數(shù)以萬(wàn)計(jì)的網(wǎng)友中，也有這樣一批“特殊”的用戶。以下這篇文章來(lái)自于一個(gè)多年為IT之家提供無(wú)障礙優(yōu)化方案的老朋友，本期IT之家學(xué)院將由他為我們說(shuō)說(shuō)針對(duì)視障用戶的網(wǎng)頁(yè)體驗(yàn)，我們?cè)撊绾胃纳啤?/p>
首先要感謝IT之家邀請(qǐng)我撰寫(xiě)本文，作為長(zhǎng)期隱秘于IT之家的一個(gè)視障用戶，受到邀請(qǐng)十分激動(dòng)，但內(nèi)心十分惶恐，因本人嘴笨筆拙，水平一般能力有限，嘗試撰寫(xiě)這類技術(shù)性文章還是頭一回。在今天撰寫(xiě)本文想來(lái)意義重大，但個(gè)人才疏學(xué)淺，有不足之處還請(qǐng)各位大佬指教。
一款優(yōu)秀的產(chǎn)品，它所涵蓋的用戶一定是多方面的，從不為了討好絕大部分的用戶而放棄對(duì)小眾用戶的支持，很榮幸，全程參與并見(jiàn)證了IT之家無(wú)障礙的逐步完善，說(shuō)出來(lái)你們可能不信，在國(guó)內(nèi)資訊類應(yīng)用中，IT之家的無(wú)障礙體驗(yàn)可能是最好的了。而今天，我們將扒開(kāi)IT之家無(wú)障礙完善之前的“慘狀”，對(duì)，今天，我們將會(huì)已IT之家為藍(lán)本，介紹視障用戶在網(wǎng)頁(yè)體驗(yàn)中的問(wèn)題。
1、為HTML標(biāo)簽增加lang屬性
長(zhǎng)久以來(lái)，創(chuàng)建一個(gè)網(wǎng)頁(yè)的HTML部分，我們習(xí)慣使用如下代碼
<!DOCTYPE HTML> <html> ... </html>
這樣創(chuàng)建網(wǎng)頁(yè)并非不可，但極有可能會(huì)給視障用戶帶來(lái)一些麻煩。比如iOS的旁白在使用默認(rèn)語(yǔ)言語(yǔ)音的情況下，該頁(yè)面中的英文字符能正常讀出，而中文字符則被忽略或錯(cuò)誤的讀出。從用戶層面上解決該問(wèn)題并不復(fù)雜，只需在旁白的語(yǔ)音設(shè)置中為轉(zhuǎn)子語(yǔ)言添加中文中國(guó)大陸選項(xiàng)，并配置好相關(guān)語(yǔ)音即可，但只有極少部分的視障用戶知道這樣的解決方案。因此，開(kāi)發(fā)者只需要在網(wǎng)頁(yè)創(chuàng)建的過(guò)程中，為標(biāo)簽增加屬性即可完美解決該問(wèn)題。
<!DOCTYPE HTML> <html lang="zh"> ... </html>
PS：該方案已應(yīng)用于IT之家的移動(dòng)網(wǎng)頁(yè)版
2、為網(wǎng)頁(yè)增加路標(biāo)
一個(gè)完整的網(wǎng)頁(yè)一般包括橫幅、導(dǎo)航欄、主要內(nèi)容、補(bǔ)充內(nèi)容、版權(quán)信息等區(qū)域，如果有幸你的網(wǎng)頁(yè)包含這些區(qū)域，你該如何使用戶輕松地認(rèn)識(shí)它們？顯然，針對(duì)不同區(qū)域設(shè)置不同的CSS效果即可做到。那么，如何為完全失明的視障用戶描述這些區(qū)域呢？
其實(shí)在W3C的標(biāo)準(zhǔn)中就有一項(xiàng)名為WAI-ARIA的技術(shù)能應(yīng)對(duì)此類問(wèn)題。在這項(xiàng)技術(shù)中，有一類元素被稱為路標(biāo)元素，在當(dāng)前區(qū)域的頂級(jí)元素上使用路標(biāo)元素，即可為視障用戶提供區(qū)域描述信息，而這些更改并不會(huì)對(duì)普通用戶的體驗(yàn)帶來(lái)影響。
精簡(jiǎn)后的代碼如下
<div role="navigation"> <a href="">首頁(yè)</a> <div> <a href="">辣品</a> <a href="">圈子</a> <button>我</button> </div> </div>
在屏幕閱讀器的朗讀中，該區(qū)域會(huì)朗讀出“導(dǎo)航”二字，并在第一個(gè)元素和最后一個(gè)元素朗讀結(jié)束后，提示視障用戶該元素所處區(qū)域的開(kāi)始或結(jié)尾。
這類路標(biāo)導(dǎo)航元素應(yīng)用得十分稀少，但應(yīng)用了的都是十分優(yōu)秀的產(chǎn)品，諸如Bootstrap、WordPress等在內(nèi)的開(kāi)源項(xiàng)目，谷歌、微軟、蘋(píng)果等國(guó)際大廠的網(wǎng)站，當(dāng)然還有我大之家的移動(dòng)網(wǎng)頁(yè)版。想和它們一樣優(yōu)秀嗎，那就快來(lái)添加這些屬性吧！
WAI-ARIA路標(biāo)導(dǎo)航role屬性值一覽表▼
| 值 | 含義 |
| banner | 橫幅區(qū) |
| search | 搜索區(qū) |
| navigation | 導(dǎo)航區(qū) |
| main | 主內(nèi)容區(qū) |
| complementary | 補(bǔ)充內(nèi)容區(qū) |
| contentinfo | 版權(quán)與隱私聲明區(qū) |
| form | 表單區(qū) |
通過(guò)這張一覽表，你的網(wǎng)站也能為視障用戶帶來(lái)十分友好的體驗(yàn)。
3、為圖片增加描述信息
精美的網(wǎng)頁(yè)設(shè)計(jì)，與搭配的圖片密切相關(guān)。除對(duì)網(wǎng)頁(yè)起裝飾作用的圖片外，應(yīng)該為每一張圖片增加描述信息，這可使得視障用戶的網(wǎng)頁(yè)體驗(yàn)大幅度增強(qiáng)。國(guó)內(nèi)為圖片增加描述信息的網(wǎng)站十分稀少，而在微軟、蘋(píng)果、谷歌等國(guó)際大廠的網(wǎng)站中，圖片描述基本是全覆蓋的。如果你也希望你的網(wǎng)站獲得相關(guān)技術(shù)，請(qǐng)參看如下代碼：
<img src="image.jpg" alt="圖片描述信息" /> <img src="image.jpg" aria-label="圖片描述信息" />
這兩種方案可任選其一，所區(qū)別的是前者為HTML的img元素提供的屬性，而后者為W3C WAI-ARIA的替代文本屬性。IT之家iOS版的文章界面采用的是后者，問(wèn)起開(kāi)發(fā)小哥選擇后者的原因時(shí)，他一昂頭略顯迷茫的回復(fù)到：”我跟蘋(píng)果官網(wǎng)上學(xué)的??！”
4、為可點(diǎn)擊控件添加TAB鍵支持
在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，難免使用到自定義控件。比如點(diǎn)擊一張圖片起到鏈接跳轉(zhuǎn)的作用。
<img src="image.jpg" onclick="location.href='index.htm'" />
開(kāi)發(fā)者通常會(huì)使用CSS技術(shù)為這張圖片加上鏈接或按鈕的樣式，對(duì)于普通用戶來(lái)說(shuō)，毫無(wú)影響。但對(duì)于習(xí)慣用TAB鍵瀏覽網(wǎng)頁(yè)的視障用戶來(lái)說(shuō)，這張圖片很容易被忽略，那么如何為這張圖片增加TAB鍵支持呢？
<img src="image.jpg" onclick="location.href='index.htm'" tabindex="0" />
你沒(méi)看錯(cuò)，僅僅增加了tabindex屬性即可做到。該屬性為網(wǎng)頁(yè)元素定義TAB鍵瀏覽順序所用，參數(shù)為數(shù)值，當(dāng)參數(shù)為0時(shí)，該元素即可被TAB鍵聚焦。
當(dāng)然，你可以讓這段代碼更完美：
<img src="image.jpg" onclick="location.href='index.htm'" tabindex="0" role="button" aria-label="首頁(yè)" />
這樣做的好處在于，使該圖片獲取TAB鍵支持的同時(shí)，還能提示視障用戶該元素為按鈕，并且用替代文本為該元素提供了“首頁(yè)”的提示，而這些更改仍然不會(huì)對(duì)普通用戶造成影響。
5、不影響視覺(jué)效果的文本提示
看到這里的你，是否聯(lián)想到之前我們提到的aria-label替代文本，這的確是個(gè)不錯(cuò)的選擇，你可為視障用戶瀏覽的任何未添加文本標(biāo)簽的元素使用該屬性。但請(qǐng)注意，如果該元素本身攜帶文本標(biāo)簽，仍然使用aria-label后，絕大多數(shù)屏幕閱讀器會(huì)只朗讀aria-label中的內(nèi)容。
<button aria-label="替代標(biāo)簽">標(biāo)簽</button>
（該按鈕會(huì)被朗讀成“替代標(biāo)簽”）
還有一種方案也來(lái)自WAI-ARIA，該屬性為aria-LabelLedby。它的值為元素ID，多個(gè)值用空格分割。該屬性通常用于沒(méi)有文本標(biāo)簽的元素，值為非語(yǔ)義化的標(biāo)簽ID。
舉個(gè)例子展示它的應(yīng)用場(chǎng)景。在iOS版IT之家的帖子編輯器中，正文編輯區(qū)為自定義控件，而該輸入控件的標(biāo)簽在它的頂部，在開(kāi)啟旁白的情況下，編輯器的標(biāo)簽和正文輸入?yún)^(qū)域?yàn)閮蓚€(gè)焦點(diǎn)，代碼如下
<div>請(qǐng)輸入正文</div> <div contenteditable="true"></div>
此時(shí)，你只需要為第一個(gè)div增加一個(gè)獨(dú)有的ID，并在第二個(gè)div中使用aria-labelledby即可獲得一個(gè)提示“請(qǐng)輸入正文”的自定義編輯區(qū)。
<div id="EditLabel" aria-hidden="true">請(qǐng)輸入正文</div> <div contenteditable="true" aria-labelledby="EditLabel"></div>
第一個(gè)div中的aria-hidden="true"是什么鬼？設(shè)想一下，編輯區(qū)的文本標(biāo)簽已經(jīng)獲得了，第一個(gè)div的焦點(diǎn)還會(huì)存在嗎？明確告訴你，依然會(huì)存在，所以使用aria-hidden="true"隱藏它，該屬性的隱藏技能僅針對(duì)視障用戶，并不影響普通用戶的觀感體驗(yàn)。
6、合并焦點(diǎn)
不得不佩服你還有耐心讀到這里，我都寫(xiě)累了呢！
在視障用戶瀏覽網(wǎng)頁(yè)過(guò)程中，還會(huì)經(jīng)常遇到的一種麻煩就是焦點(diǎn)過(guò)于分散，這樣的麻煩并非開(kāi)發(fā)者有意為之，實(shí)在是機(jī)緣巧合下產(chǎn)生的，不信你看
▲圖為IT之家移動(dòng)網(wǎng)頁(yè)版資訊列表項(xiàng)
代碼如下：
<a href=""> <div> <img src=""> </div> <div> <p>< span>時(shí)間</span> <span>評(píng)論數(shù)</span> </p> <p>標(biāo)題</p> </div> </a>
這樣的設(shè)計(jì)會(huì)嚴(yán)重影響視障用戶在移動(dòng)版網(wǎng)頁(yè)上的體驗(yàn)。具體表現(xiàn)為，該鏈接被拆分成了多個(gè)焦點(diǎn)，圖片、時(shí)間、評(píng)論數(shù)和標(biāo)題各自為戰(zhàn)，任意點(diǎn)擊當(dāng)中的一個(gè)焦點(diǎn)，都會(huì)打開(kāi)相同的頁(yè)面。由于該鏈接焦點(diǎn)被拆分成了四個(gè)焦點(diǎn)，導(dǎo)致視障用戶的滑動(dòng)瀏覽效率大大降低，如何解決呢？
我們通過(guò)此前大篇幅的介紹，這個(gè)問(wèn)題的解決方案已經(jīng)很多了，可以用aria-label重新再A元素中定義標(biāo)簽；還可以通過(guò)aria-labelledby關(guān)聯(lián)所有被拆分焦點(diǎn)的ID。不過(guò)，這些看似都比較復(fù)雜，我們簡(jiǎn)單粗暴的啟用了一種新方案，使用role="option"將焦點(diǎn)合并了。
role = "option"是為自定義選擇項(xiàng)控件提供語(yǔ)義化支持的屬性，由于option的天性，它無(wú)法被拆分成多個(gè)焦點(diǎn)，使用它我們成功解決了一個(gè)復(fù)雜的問(wèn)題。但在此，我們并不推薦使用它，雖然當(dāng)前市面上的屏幕閱讀器都能在他的幫助下整合被拆分的焦點(diǎn)，但不保證在長(zhǎng)遠(yuǎn)的將來(lái)，該屬性仍具有相關(guān)優(yōu)良特性。
看到這里的朋友，我敬你是條漢子，本文寫(xiě)到這里真的就結(jié)束了，今天介紹的這幾種方法雖然適用人群為小眾，但他們同樣也是這個(gè)點(diǎn)和線鉤織成世界中的一員，他們理應(yīng)和普通用戶獲得相同的用戶體驗(yàn)。本文雖結(jié)束了，但他的后續(xù)篇目正在路上，在不久的將來(lái)定會(huì)和大家見(jiàn)面。
延伸閱讀：
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。