無(wú)障礙、HTML 小細(xì)節(jié)、焦點(diǎn)、a11y、Accessibility、框架選擇

無(wú)障礙開(kāi)發(fā)還是應(yīng)該從 HTML 開(kāi)始聊起，無(wú)論是盲人閱讀器還是瀏覽器等工具最核心的部分還是在 HTML，畢竟沒(méi)了 CSS 只是不美觀了，沒(méi)了 JavaScript 只是少了交互和無(wú)限擴(kuò)展的可能性。

有的同學(xué)會(huì)說(shuō)了產(chǎn)品和老板拿著鞭子在后頭趕馬車哪里有時(shí)間寫(xiě)這些?，F(xiàn)實(shí)是這樣的，但是在選擇UI框架的時(shí)候可以選擇 無(wú)障礙 做得好的來(lái)提升網(wǎng)站的友好度，有句話說(shuō)得好 居廟堂之高則憂其民，處江湖之遠(yuǎn)則憂其君，靈活變通下不影響生活體驗(yàn)豈不是美哉？

HTML 標(biāo)簽元素中還有一種比較少人知道的分類方法：交互標(biāo)簽 和 非交互標(biāo)簽，在無(wú)障礙開(kāi)發(fā)中需要留意的便是這二者。交互標(biāo)簽 往往會(huì)和 焦點(diǎn) 一起出現(xiàn)，按下 tab 鍵選擇頁(yè)面上的 交互標(biāo)簽 這個(gè)時(shí)候交互標(biāo)簽會(huì)被 藍(lán)色的 焦點(diǎn) 框覆蓋，如果想反向選擇可以使用 shift + tab。

在掘金個(gè)人主頁(yè)里按下 tab 鍵后，藍(lán)色的焦點(diǎn)框會(huì)從 logo 到 首頁(yè)一個(gè)個(gè)鏈接遍歷下來(lái)，在這個(gè)過(guò)程中可以發(fā)現(xiàn) 鏈接、按鈕、搜索框 都會(huì)產(chǎn)生焦點(diǎn)。細(xì)心的同學(xué)如果打開(kāi)控制臺(tái)會(huì)還會(huì)發(fā)現(xiàn)，跳轉(zhuǎn)的順序和標(biāo)簽在 HTML 中出現(xiàn)的先后順序有關(guān)。

運(yùn)動(dòng)覺(jué)障礙的用戶，例如霍金大大就可以利用他的三個(gè)指頭配合 tab 和 shift + tab 來(lái)瀏覽 掘金 并在掘金上做交互性的操作。除此之外鍵盤(pán)上的 方向鍵 也是移動(dòng)和瀏覽頁(yè)面必不可少的一部分，你可以使用 上下鍵 來(lái)是的頁(yè)面可以上下滾動(dòng)，也可以在 select 標(biāo)簽 中選擇選項(xiàng)。

更多無(wú)障礙群體內(nèi)容可以閱讀 無(wú)障礙世界

正所謂 工欲善其事必先利其器 對(duì)于被 焦點(diǎn) 選中的元素，可以通過(guò) document.activeElement 來(lái)獲取。當(dāng)然也可以使用插件來(lái)完成，這里推薦谷歌瀏覽器的一款插件 accessibility developer tools 。

通過(guò)這個(gè)測(cè)試可以知道關(guān)于交互標(biāo)簽的情報(bào)便是 鏈接、按鈕、搜索框 是交互標(biāo)簽，下面用選擇器來(lái)總結(jié)一下 交互標(biāo)簽：

const tags = [
    "a[href]", "area[href]", "audio[controls]", "video[controls]",
    "input:not([disabled])", "select:not([disabled])",
    "textarea:not([disabled])", "button:not([disabled])",
    "iframe", "object", "embed", "[contenteditable]",
    "[tabindex="0"]",
];

const allTagsDOM = document.querySelectorAll(tags.join(","));

console.log(allTagsDOM);

除了 交互標(biāo)簽 中提到的標(biāo)簽外都屬于 非交互標(biāo)簽，有些開(kāi)發(fā)老司機(jī)可能會(huì)問(wèn)：

如果想讓 非交互標(biāo)簽 變成 交互標(biāo)簽 怎么辦？

使用自定義標(biāo)簽例如 select 或者 button 怎么辦？

這里便需要一個(gè)很經(jīng)常被忽略掉的標(biāo)簽 tabindex：

它根據(jù) tabindex 從小到大來(lái)控制 tab 的跳動(dòng)順序，雖然可以控制整個(gè)頁(yè)面的瀏覽順序，但是最好只使用 0 來(lái)指定 tabindex 屬性。在上面也提到過(guò)打開(kāi)控制面板查看頁(yè)面結(jié)構(gòu) 會(huì)發(fā)現(xiàn) tab 默認(rèn)的跳轉(zhuǎn)順序和 標(biāo)簽順序是一致的，如果破壞掉了這個(gè)順序?qū)τ谝恍┎患嫒?tabindex 的盲人輔助工具、瀏覽器會(huì)造成無(wú)法兼容的情況。

從下面例子也能了解到 頁(yè)面結(jié)構(gòu)順序 非常重要，如果屏幕閱讀器不支持 tabindex 時(shí)便會(huì)先讀取footer標(biāo)簽的中內(nèi)容，對(duì)于盲人來(lái)說(shuō)可能會(huì)一頭霧水不知道網(wǎng)站怎么使用：

代碼

main
header

效果

除此之外當(dāng)使用 css 樣式 float: right 改變頁(yè)面渲染的排列順序也可能會(huì)造成影響，對(duì)于習(xí)慣從右向左閱讀的用戶來(lái)說(shuō)會(huì)造成困惑找不到焦點(diǎn)的位置。

代碼

1
2
3

效果

當(dāng)自定義元素時(shí)需要把元素默認(rèn)的 焦點(diǎn) 功能模擬出來(lái)進(jìn)行替換即可。在上文提到了 非互動(dòng)標(biāo)簽 轉(zhuǎn)換 互動(dòng)標(biāo)簽 利用 tabindex 這個(gè)屬性來(lái)完成，其實(shí)還有一個(gè)小技巧利用 tabindex=-1 設(shè)置標(biāo)簽后，對(duì)應(yīng)的 DOM 節(jié)點(diǎn)將會(huì)擁有 focus() 方法，利用這一點(diǎn)可以配合 JavaScript 可以實(shí)現(xiàn)非常多的功能。

主要需要注意的是 tab鍵、enter鍵、方向鍵、space鍵 的功能。

提到看不見(jiàn)的元素很多同學(xué)可能會(huì)一頭霧水，最常見(jiàn)的看不見(jiàn)標(biāo)簽便是隱藏的導(dǎo)航菜單欄：

上面講到的 交互標(biāo)簽 會(huì)按順序被 tab 選中成為焦點(diǎn)，導(dǎo)航菜單中的元素是一個(gè)個(gè)的 a[href]，當(dāng)在使用 tab 瀏覽的時(shí)候焦點(diǎn)會(huì)被鎖定在這個(gè)隱藏的菜單之中。如果沒(méi)有把鼠標(biāo)懸浮在首頁(yè)上時(shí)，用戶可能會(huì)產(chǎn)生困惑 焦點(diǎn)去哪里了。

這個(gè)時(shí)候的解決方法便是使用 display:none 或者 visibility:hidden 來(lái)控制標(biāo)簽不在 tab 的選著范圍中。兩者區(qū)別是 display:none 會(huì)讓元素在渲染樹(shù)中消失，不占用任何空間，visibility:hidden 則保留元素占據(jù)的空間，也依舊在渲染樹(shù)中。當(dāng)需要的時(shí)候使用 display:block 和 visibility:visible 進(jìn)行顯示。

掘金的隱藏菜單做得挺好的，不會(huì)讓焦點(diǎn)跳轉(zhuǎn)到 隱藏菜單，美中不足的是只能通過(guò)鼠標(biāo)懸浮來(lái) 顯示菜單 ，不能通過(guò) tab 和 enter 進(jìn)行選中操作。

通過(guò)點(diǎn)擊菜單欄來(lái)進(jìn)行頁(yè)面的切換，但是你有思考過(guò)當(dāng)切換完菜單，用戶要瀏覽內(nèi)容還得按多少下 tab 才能進(jìn)入內(nèi)容標(biāo)簽嘛？如果菜單欄有五六十個(gè)的情況是多么可怕，你還真別說(shuō)沒(méi)有 某東 和 某寶 的菜單項(xiàng)就有這么多：

不過(guò)當(dāng)選中標(biāo)簽按下 enter 時(shí)，他們會(huì)直接打開(kāi)新的頁(yè)面算是減少了用戶需要 tab 的次數(shù)，不過(guò)在新頁(yè)面上還是要重新點(diǎn)擊多次 tab 才能瀏覽內(nèi)容。我們可以利用 錨點(diǎn) 和 tabindex=-1 來(lái)幫助用戶快速切換內(nèi)容焦點(diǎn)：

快速進(jìn)入內(nèi)容




    主要內(nèi)容

這下用戶按下 tab 便可以快速選擇是否直接瀏覽內(nèi)容，但是這個(gè) a 標(biāo)簽 會(huì)影響到頁(yè)面的美觀，可以利用 css 樣式中的 position: absolute 和 :focus 來(lái)幫助隱藏 a 標(biāo)簽 功能保持不變codepan

.super-skip {
    position: absolute;
    top -40px;
    left: 0; 
    z-index:100;
}

.super-skip:focus {
    top: 0;
}

在單頁(yè)面瀏覽中用戶會(huì)在 菜單 中選擇 菜單項(xiàng)，但是頁(yè)面內(nèi)容改變的卻還是要 tab 瀏覽完剩下的標(biāo)簽才能將 焦點(diǎn) 切換到 頁(yè)面內(nèi)容，可以利用 tabindex=-1 和 focus() 來(lái)快速的將焦點(diǎn)切換至頁(yè)面內(nèi)容 codepan：

    
home



    
post



    
user

在使用彈出自定義 Alert 時(shí)，由于 Alert 的內(nèi)容也在 dom 元素里，使用 tab 進(jìn)行切換時(shí)會(huì)導(dǎo)致切換的焦點(diǎn) 無(wú)法落在 Alert 對(duì)話框中，這里推薦閱讀 SweetAlert 的源碼它的無(wú)障礙做得非常棒，重點(diǎn)閱讀 getFocusableElements 和 restoreActiveElement 這兩個(gè)函數(shù)。

主要的流程分為：

利用 document.activeElement 記錄當(dāng)前的焦點(diǎn)元素和頁(yè)面 x 和 y 坐標(biāo)。

選著當(dāng)前 Alert 對(duì)話框中的 變成交互標(biāo)簽 上文中提到的 tags。

設(shè)置第一個(gè) tag 的屬性為 focus()。

設(shè)置最后一個(gè) tag 被點(diǎn)擊時(shí)需要循環(huán)重置到第一個(gè) tag。

如果關(guān)閉 Alert 則通過(guò)一開(kāi)始記錄的焦點(diǎn)元素和頁(yè)面 x 和 y 坐標(biāo)進(jìn)行恢復(fù)。

在 Element UI 中的自定義元素都做得不錯(cuò)，就是對(duì)于視障用戶 焦點(diǎn)focus 的顏色區(qū)分度不夠，就連小二自己都看不清已選擇的元素時(shí)被focus在哪里，不過(guò)可以通過(guò)修改 is-focus 來(lái)修改樣式顏色：

Radio 無(wú)障礙中 tab 和 space 都有實(shí)現(xiàn)。

Checkbox 無(wú)障礙中 tab 和 space 都有實(shí)現(xiàn)。

Select 無(wú)障礙中 tab 和 enter 都有實(shí)現(xiàn)。

TimePicker無(wú)障礙中 tab 和 enter、方向鍵 都有實(shí)現(xiàn)。

Material UI 在無(wú)障礙上就做得非常好，而在 Ant Design 無(wú)障礙相關(guān)的 交互元素 就做得不怎么好了，如果產(chǎn)品目標(biāo)群體中有需要 無(wú)障礙 相關(guān)的服務(wù)，在選擇框架時(shí)可以試試其中的 交互元素 做得如何，畢竟站在巨人的肩膀上比自己造輪子快又好。

H1 の 小秘密

img の 小九九

無(wú)障礙世界

扼住焦點(diǎn)的喉嚨

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來(lái)自 PushMeTop