寫給開(kāi)發(fā)人員的Web無(wú)障礙標(biāo)準(zhǔn)
網(wǎng)絡(luò)可訪問(wèn)性標(biāo)準(zhǔn)很重要，對(duì)Web開(kāi)發(fā)人員，必須要解知識(shí)一些應(yīng)Web可訪問(wèn)性標(biāo)準(zhǔn)，以便創(chuàng)造更好的訪問(wèn)體驗(yàn)。然而，有在一個(gè)問(wèn)題實(shí)踐中公認(rèn)的W3C Web內(nèi)容可訪問(wèn)性指南(WCAG，現(xiàn)在是2.1版本)太復(fù)雜了。每條規(guī)則都繁深?yuàn)W無(wú)比，在閱讀每段令人麻木的規(guī)則時(shí)，會(huì)讓人感到越來(lái)越偏離真正的初衷——為每個(gè)人創(chuàng)造出色的用戶體驗(yàn)。
歸根結(jié)底，我們希望為人們而不是為規(guī)則開(kāi)發(fā)Web應(yīng)用程序。我們應(yīng)該能夠找出真正的變化，可以讓我們的產(chǎn)品和網(wǎng)站體驗(yàn)對(duì)任何用戶都更佳。本文中我們節(jié)選了《Practical Web Inclusion and Accessibility》 的關(guān)于Web無(wú)障礙的一些基本規(guī)則和標(biāo)準(zhǔn)，希望它們?yōu)榇蠹姨峁┮粋€(gè)起點(diǎn)，開(kāi)始思考和實(shí)施當(dāng)今的無(wú)障礙標(biāo)準(zhǔn)。
概述
本文中的Web無(wú)障礙標(biāo)準(zhǔn)概括了Ashley Firth于2019年撰寫的《Practical Web Inclusion and Accessibility》 的關(guān)于Web無(wú)障礙的優(yōu)秀書籍。本書設(shè)計(jì)時(shí)沒(méi)有考慮任何角色，因?yàn)榫W(wǎng)絡(luò)可訪問(wèn)性標(biāo)準(zhǔn)最好由整個(gè)團(tuán)隊(duì)共同支持。這本書對(duì)于Web開(kāi)發(fā)人員來(lái)說(shuō)都非常有價(jià)值。本書包含許多代碼段和簡(jiǎn)單的說(shuō)明，供開(kāi)發(fā)人員實(shí)現(xiàn)Web可訪問(wèn)性標(biāo)準(zhǔn)。
這本書還旨在幫助批判性地思考如何為有身體障礙的人士解決問(wèn)題。因此，這本書圍繞永久性和暫時(shí)性的各種殘疾進(jìn)行了組織，將殘疾定義為與與其互動(dòng)的世界有關(guān)系的人們。書中的章節(jié)包括失明，低視力和色盲，運(yùn)動(dòng)障礙，耳聾和聽(tīng)覺(jué)障礙，認(rèn)知障礙，心理健康等等，并承認(rèn)書中沒(méi)有涉及更多多其他案例。
本書的重點(diǎn)是同理心，而不是規(guī)則或系統(tǒng)，這是我們?cè)趦?yōu)先考慮以下高級(jí)技能時(shí)應(yīng)該采用的哲學(xué)。
優(yōu)秀的Web無(wú)障礙標(biāo)準(zhǔn)
與通常的看法相反，視力障礙不一定是使用互聯(lián)網(wǎng)的障礙。如果網(wǎng)站設(shè)計(jì)合理，很容易將視力不佳的用戶包括在內(nèi)，他們可以像其他任何人一樣擁有豐富的在線體驗(yàn)。以下網(wǎng)絡(luò)可訪問(wèn)性標(biāo)準(zhǔn)特別適合那些盲人。盲人通常通過(guò)屏幕閱讀或脆弱的軟件與網(wǎng)絡(luò)互動(dòng)。
使用語(yǔ)義標(biāo)記和位置ARIA角色
一個(gè)div無(wú)法為它所包含的內(nèi)容提供上下文，但是我們一直都在使用div。對(duì)于使用屏幕閱讀軟件的訪問(wèn)者，只能看到大大堆的divs標(biāo)簽行，而無(wú)法了解頁(yè)面的位置。
究竟是頁(yè)面開(kāi)始，中間還是末尾呢?
有兩種為用戶提供上下文的解決方案：語(yǔ)義標(biāo)記和ARIA角色。
語(yǔ)義標(biāo)記是類似header，section，main，nav，和footer一樣的標(biāo)簽。對(duì)于header，main和footer標(biāo)簽標(biāo)簽，大家可能都熟識(shí)，可以很方便的添加的任何html頁(yè)面中。
ARIA角色提供的上下文類似于語(yǔ)義標(biāo)記。
區(qū)別：可以將屬性添加到任何標(biāo)簽，包括div。
例如，
和等效。
為圖片添加alt為說(shuō)明
Alt標(biāo)簽對(duì)許多類型的用戶都很有價(jià)值，它們可以幫助用戶了解他們無(wú)法感知的內(nèi)容。
例如，在有視障用戶進(jìn)行用戶，比如對(duì)于一個(gè)能夠看到大型彩色圖像的用戶，但是沒(méi)有alt文本，他們無(wú)法知道圖像顯示了什么。
編寫好的alt文本很容易被誤解，因?yàn)閍lt文本的編寫者可能會(huì)傾向于標(biāo)記圖像而不是用于感知圖像。
有關(guān)編寫圖像alt文本的有用建議，請(qǐng)參見(jiàn)下表：
有關(guān)al文本的官方指南，可參閱WebAIM網(wǎng)站上的alt文本部分。
添加語(yǔ)言屬性
該lang屬性通常被遺忘，但是對(duì)于用戶而言，以一種預(yù)期的語(yǔ)言體驗(yàn)在屏幕閱讀設(shè)備上的頁(yè)面至關(guān)重要。lang屬性位于html標(biāo)簽中。例如：對(duì)于英語(yǔ)，可以將值設(shè)置為en?？梢酝ㄟ^(guò)腳本和子標(biāo)簽獲得更具體的信息。
- <html lang="en">
- …
- </html>
創(chuàng)建"跳至內(nèi)容部分"鏈接
可以在文檔頂部添加一個(gè)鏈接，以允許屏幕閱讀器用戶選擇跳過(guò)常見(jiàn)的重復(fù)性內(nèi)容，例如徽標(biāo)和主導(dǎo)航。用戶可以直接進(jìn)入頁(yè)面主要內(nèi)容。每次用戶進(jìn)入新頁(yè)面時(shí)，都可以通過(guò)為他們提供簡(jiǎn)單的導(dǎo)航選項(xiàng)，而不是執(zhí)行相同的"歡迎序列"來(lái)改善他們的體驗(yàn)?？梢允褂肅SS直觀地隱藏此鏈接，但是當(dāng)用戶使用鍵盤導(dǎo)航到該鏈接時(shí)，該鏈接才可見(jiàn)。
要添加這樣的鏈接，可參見(jiàn)下面的例子：
- HTML:
- <a class="skip-to-content" href="#content">跳到內(nèi)容部分</a>
- <main id="content">…</main>
- CSS:
- .skip-to-content {
- position: absolute;
- top: -400px;
- }
弱視和色盲的Web可訪問(wèn)性標(biāo)準(zhǔn)
由于視力障礙的類型和組合太多，因此有時(shí)根本沒(méi)有一種適合所有人的一刀切的解決方案。視力低下是可訪問(wèn)性的罕見(jiàn)領(lǐng)域之一，在其中修復(fù)一個(gè)障礙實(shí)際上可能會(huì)讓其他用戶造成障礙。
實(shí)用的Web包含和可訪問(wèn)性
視力低下或色盲的用戶可能非常多樣化。根據(jù)低視力用戶的合作調(diào)查發(fā)現(xiàn)用戶既以通過(guò)放大的尺寸觀看屏幕，又使用屏幕閱讀器進(jìn)行強(qiáng)化。因此，屏幕與屏幕閱讀器之間保持一致性的重要性。
盡管殘障用戶的經(jīng)歷各不相同，但以下Web訪問(wèn)標(biāo)準(zhǔn)對(duì)于視力低下或色盲的人特別有用。
使用相對(duì)大小而不是像素來(lái)顯示字體大小
使用像像素這樣的固定測(cè)量值可能會(huì)對(duì)使用放大率的測(cè)量有害。像素大小的文本將忽略用戶首選項(xiàng)。如果14px字體大小太小，放大后仍然太小。
而是使用類似rem或em單位。這些測(cè)量單位不會(huì)影響用戶的偏好，并會(huì)帶來(lái)更靈活的閱讀體驗(yàn)。
測(cè)試顏色對(duì)比度和文本大小
高色彩對(duì)比度和文本大小可以改善所有人的體驗(yàn)，但是，作為不強(qiáng)調(diào)文本的一種方式，我們?nèi)匀辉谠O(shè)計(jì)中使用較小的文本大小和淺灰色白色文本。通常，我們應(yīng)該以高對(duì)比度為目標(biāo)，并嘗試提高基本字體的大小并確定可讀字體的優(yōu)先級(jí)。
不要使用單獨(dú)的顏色來(lái)表示狀態(tài)
在許多設(shè)計(jì)中，紅色和綠色之類的顏色用于指示狀態(tài)。如果僅是這些指標(biāo)，則那些具有常見(jiàn)色盲類型的人可能不會(huì)察覺(jué)到這種差異或覺(jué)得具有挑戰(zhàn)性。紅綠色盲的人更容易分辨出淺綠色和深紅色之間的區(qū)別。但是，用淺綠色和淺紅色指示狀態(tài)可能更難區(qū)分。
可以使用顏色以外的指示器。例如，圖標(biāo)也可以用作指示符。
行動(dòng)障礙的頂級(jí)Web無(wú)障礙標(biāo)準(zhǔn)
是否曾經(jīng)嘗試不用鼠標(biāo)訪問(wèn)網(wǎng)站?這比想象的要難，尤其是在需要跨多個(gè)頁(yè)面執(zhí)行操作(例如注冊(cè)或購(gòu)買某物)時(shí)。一些行動(dòng)不便的用戶通常只使用鍵盤與計(jì)算機(jī)交互。
以下網(wǎng)絡(luò)可訪問(wèn)性標(biāo)準(zhǔn)對(duì)那些患有運(yùn)動(dòng)障礙并使用鍵盤導(dǎo)航網(wǎng)頁(yè)的人很有幫助。
使用焦點(diǎn)樣式
默認(rèn)情況下，當(dāng)使用tab按鈕時(shí)，元素周圍會(huì)發(fā)出藍(lán)色光，但是許多設(shè)計(jì)人員可能會(huì)刪除此樣式，因?yàn)樗麄兛赡軙?huì)覺(jué)得它不舒服，使用CSS樣式將焦點(diǎn)指示器全部刪除：
*: focus { outline: 0; }
可以想象，消除焦點(diǎn)是一個(gè)大問(wèn)題。擁有清晰的焦點(diǎn)風(fēng)格是無(wú)價(jià)的，因此請(qǐng)考慮創(chuàng)建既有品位又明顯的焦點(diǎn)指示器。作為開(kāi)發(fā)人員，重要的是要tab通過(guò)我們的應(yīng)用程序并注意焦點(diǎn)指示符何時(shí)不明顯。
也要注意模態(tài)之類的疊加層。確保關(guān)閉按鈕很明顯并且可以使用鍵盤訪問(wèn)。
避免出現(xiàn)懸停的內(nèi)容
在諸如下拉導(dǎo)航的元素中，懸停狀態(tài)作為鍵盤上的焦點(diǎn)區(qū)域觸發(fā)。但是這兒有一個(gè)問(wèn)題：當(dāng)移出頂層項(xiàng)目時(shí)，菜單會(huì)折疊。
此外，如果屏幕閱讀器有內(nèi)容visibility:hidden或display:none設(shè)置了內(nèi)容，則它們不會(huì)閱讀內(nèi)容。如果使用下拉導(dǎo)航，則使該元素看起來(lái)不可見(jiàn)，但對(duì)屏幕閱讀器保持可見(jiàn)。可以采用與"跳至主要內(nèi)容"鏈接相同的方式進(jìn)行絕對(duì)定位。如果以這種方式解決問(wèn)題，鍵盤仍然可以到達(dá)內(nèi)容，但是它仍然不可見(jiàn)。解決該問(wèn)題的方法是允許菜單在單擊時(shí)永久擴(kuò)展。
耳聾和聽(tīng)力障礙的優(yōu)秀Web可訪問(wèn)性標(biāo)準(zhǔn)
乍一看，這些用戶會(huì)遇到類似的訪問(wèn)需求——聽(tīng)覺(jué)信息必須以其他方式傳達(dá)。實(shí)際上，還有很多事情要做，重要的是要記住，不同的聾啞用戶對(duì)于如何接收此信息有不同的偏好。
使用track元素添加字幕和字幕操作
在HTML中，可以很好地控制字幕。使用HTML track元素，可以將多種字幕文件添加到不同語(yǔ)言的視頻中。字幕的常見(jiàn)文件格式是.vtt或Web視頻文本軌道格式。
還可以使用CSS設(shè)置字幕樣式?？梢葬槍?duì)喜歡video::cue或者audio::cue選擇字幕本身的風(fēng)格。
編寫標(biāo)題時(shí)，記住操作和對(duì)話很重要。可以使用方括號(hào)指示操作。例如，[spits drink]。
總結(jié)
上面Web可訪問(wèn)性標(biāo)準(zhǔn)是一組很棒的標(biāo)準(zhǔn)，可以讓我們的網(wǎng)站大大改善障礙人士的訪問(wèn)體驗(yàn)，但是還有很多東西要學(xué)習(xí)，尤其是當(dāng)涉及與表單和在線支付體驗(yàn)等復(fù)雜的網(wǎng)站交互時(shí)。
