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

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

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

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

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

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

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

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

通過這個測試可以知道關(guān)于交互標(biāo)簽的情報便是 鏈接、按鈕、搜索框 是交互標(biāo)簽，下面用選擇器來總結(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)簽，有些開發(fā)老司機(jī)可能會問：

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

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

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

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

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

代碼

main
header

效果

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

代碼

1
2
3

效果

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

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

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

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

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

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

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

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

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




    主要內(nèi)容

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

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

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

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

    
home



    
post



    
user

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

主要的流程分為：

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

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

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

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

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

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

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

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

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

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

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

H1 の 小秘密

img の 小九九

無障礙世界

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

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

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

如果您想激勵小二可以到 Github 給個 小星星。

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

本文原稿來自 PushMeTop