資訊專欄INFORMATION COLUMN
簡介
無障礙、HTML 小細節(jié)、焦點、a11y、Accessibility、框架選擇
無障礙開發(fā)還是應該從 HTML 開始聊起，無論是盲人閱讀器還是瀏覽器等工具最核心的部分還是在 HTML，畢竟沒了 CSS 只是不美觀了，沒了 JavaScript 只是少了交互和無限擴展的可能性。
有的同學會說了產(chǎn)品和老板拿著鞭子在后頭趕馬車哪里有時間寫這些?，F(xiàn)實是這樣的，但是在選擇UI框架的時候可以選擇 無障礙 做得好的來提升網(wǎng)站的友好度，有句話說得好 居廟堂之高則憂其民，處江湖之遠則憂其君，靈活變通下不影響生活體驗豈不是美哉？
鍵盤與交互HTML 標簽元素中還有一種比較少人知道的分類方法：交互標簽 和 非交互標簽，在無障礙開發(fā)中需要留意的便是這二者。交互標簽 往往會和 焦點 一起出現(xiàn)，按下 tab 鍵選擇頁面上的 交互標簽 這個時候交互標簽會被 藍色的 焦點 框覆蓋，如果想反向選擇可以使用 shift + tab。
在掘金個人主頁里按下 tab 鍵后，藍色的焦點框會從 logo 到 首頁一個個鏈接遍歷下來，在這個過程中可以發(fā)現(xiàn) 鏈接、按鈕、搜索框 都會產(chǎn)生焦點。細心的同學如果打開控制臺會還會發(fā)現(xiàn)，跳轉的順序和標簽在 HTML 中出現(xiàn)的先后順序有關。
運動覺障礙的用戶，例如霍金大大就可以利用他的三個指頭配合 tab 和 shift + tab 來瀏覽 掘金 并在掘金上做交互性的操作。除此之外鍵盤上的 方向鍵 也是移動和瀏覽頁面必不可少的一部分，你可以使用 上下鍵 來是的頁面可以上下滾動，也可以在 select 標簽 中選擇選項。
更多無障礙群體內容可以閱讀 無障礙世界調試工具
正所謂 工欲善其事必先利其器 對于被 焦點 選中的元素，可以通過 document.activeElement 來獲取。當然也可以使用插件來完成，這里推薦谷歌瀏覽器的一款插件 accessibility developer tools 。
交互標簽通過這個測試可以知道關于交互標簽的情報便是 鏈接、按鈕、搜索框 是交互標簽，下面用選擇器來總結一下 交互標簽：
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);
非交互標簽
除了 交互標簽 中提到的標簽外都屬于 非交互標簽，有些開發(fā)老司機可能會問：
如果想讓 非交互標簽 變成 交互標簽 怎么辦？
使用自定義標簽例如 select 或者 button 怎么辦？
變成交互標簽這里便需要一個很經(jīng)常被忽略掉的標簽 tabindex：
它根據(jù) tabindex 從小到大來控制 tab 的跳動順序，雖然可以控制整個頁面的瀏覽順序，但是最好只使用 0 來指定 tabindex 屬性。在上面也提到過打開控制面板查看頁面結構 會發(fā)現(xiàn) tab 默認的跳轉順序和 標簽順序是一致的，如果破壞掉了這個順序對于一些不兼容 tabindex 的盲人輔助工具、瀏覽器會造成無法兼容的情況。
破壞標簽順序從下面例子也能了解到 頁面結構順序 非常重要，如果屏幕閱讀器不支持 tabindex 時便會先讀取footer標簽的中內容，對于盲人來說可能會一頭霧水不知道網(wǎng)站怎么使用：
main header
除此之外當使用 css 樣式 float: right 改變頁面渲染的排列順序也可能會造成影響，對于習慣從右向左閱讀的用戶來說會造成困惑找不到焦點的位置。
當自定義元素時需要把元素默認的 焦點 功能模擬出來進行替換即可。在上文提到了 非互動標簽 轉換 互動標簽 利用 tabindex 這個屬性來完成，其實還有一個小技巧利用 tabindex=-1 設置標簽后，對應的 DOM 節(jié)點將會擁有 focus() 方法，利用這一點可以配合 JavaScript 可以實現(xiàn)非常多的功能。
主要需要注意的是 tab鍵、enter鍵、方向鍵、space鍵 的功能。
看不見的元素提到看不見的元素很多同學可能會一頭霧水，最常見的看不見標簽便是隱藏的導航菜單欄：
上面講到的 交互標簽 會按順序被 tab 選中成為焦點，導航菜單中的元素是一個個的 a[href]，當在使用 tab 瀏覽的時候焦點會被鎖定在這個隱藏的菜單之中。如果沒有把鼠標懸浮在首頁上時，用戶可能會產(chǎn)生困惑 焦點去哪里了。
這個時候的解決方法便是使用 display:none 或者 visibility:hidden 來控制標簽不在 tab 的選著范圍中。兩者區(qū)別是 display:none 會讓元素在渲染樹中消失，不占用任何空間，visibility:hidden 則保留元素占據(jù)的空間，也依舊在渲染樹中。當需要的時候使用 display:block 和 visibility:visible 進行顯示。
掘金的隱藏菜單做得挺好的，不會讓焦點跳轉到 隱藏菜單，美中不足的是只能通過鼠標懸浮來 顯示菜單 ，不能通過 tab 和 enter 進行選中操作。實例 主內容快速切換
通過點擊菜單欄來進行頁面的切換，但是你有思考過當切換完菜單，用戶要瀏覽內容還得按多少下 tab 才能進入內容標簽嘛？如果菜單欄有五六十個的情況是多么可怕，你還真別說沒有 某東 和 某寶 的菜單項就有這么多：
不過當選中標簽按下 enter 時，他們會直接打開新的頁面算是減少了用戶需要 tab 的次數(shù)，不過在新頁面上還是要重新點擊多次 tab 才能瀏覽內容。我們可以利用 錨點 和 tabindex=-1 來幫助用戶快速切換內容焦點：
快速進入內容主要內容
這下用戶按下 tab 便可以快速選擇是否直接瀏覽內容，但是這個 a 標簽 會影響到頁面的美觀，可以利用 css 樣式中的 position: absolute 和 :focus 來幫助隱藏 a 標簽 功能保持不變codepan
.super-skip {
position: absolute;
top -40px;
left: 0;
z-index:100;
}
.super-skip:focus {
top: 0;
}
快速切換菜單
在單頁面瀏覽中用戶會在 菜單 中選擇 菜單項，但是頁面內容改變的卻還是要 tab 瀏覽完剩下的標簽才能將 焦點 切換到 頁面內容，可以利用 tabindex=-1 和 focus() 來快速的將焦點切換至頁面內容 codepan：
Alerthome
post
user
在使用彈出自定義 Alert 時，由于 Alert 的內容也在 dom 元素里，使用 tab 進行切換時會導致切換的焦點 無法落在 Alert 對話框中，這里推薦閱讀 SweetAlert 的源碼它的無障礙做得非常棒，重點閱讀 getFocusableElements 和 restoreActiveElement 這兩個函數(shù)。
主要的流程分為：
利用 document.activeElement 記錄當前的焦點元素和頁面 x 和 y 坐標。
選著當前 Alert 對話框中的 變成交互標簽 上文中提到的 tags。
設置第一個 tag 的屬性為 focus()。
設置最后一個 tag 被點擊時需要循環(huán)重置到第一個 tag。
如果關閉 Alert 則通過一開始記錄的焦點元素和頁面 x 和 y 坐標進行恢復。
挑選框架在 Element UI 中的自定義元素都做得不錯，就是對于視障用戶 焦點focus 的顏色區(qū)分度不夠，就連小二自己都看不清已選擇的元素時被focus在哪里，不過可以通過修改 is-focus 來修改樣式顏色：
Radio 無障礙中 tab 和 space 都有實現(xiàn)。
Checkbox 無障礙中 tab 和 space 都有實現(xiàn)。
Select 無障礙中 tab 和 enter 都有實現(xiàn)。
TimePicker無障礙中 tab 和 enter、方向鍵 都有實現(xiàn)。
Material UI 在無障礙上就做得非常好，而在 Ant Design 無障礙相關的 交互元素 就做得不怎么好了，如果產(chǎn)品目標群體中有需要 無障礙 相關的服務，在選擇框架時可以試試其中的 交互元素 做得如何，畢竟站在巨人的肩膀上比自己造輪子快又好。
無障礙相關內容H1 の 小秘密
img の 小九九
無障礙世界
扼住焦點的喉嚨
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/103492.html
showImg(https://segmentfault.com/img/remote/1460000018891197); 簡介 無障礙、WAI、ARIA、a11y、Accessibility、框架選擇 如何向 視障用戶 介紹兔子長什么樣？有的同學可能會說： 毛茸茸的長耳朵。 短短圓圓的小尾巴。 紅紅的眼睛。 那如何向 視障用戶 介紹網(wǎng)頁長什么樣？有看過 語義化與無障礙樹 的同學可能會說： ...
簡介 可視區(qū)域、頁面優(yōu)化、DOM節(jié)點多、圖片懶加載、性能 可視區(qū)域是一個前端優(yōu)化經(jīng)常出現(xiàn)的名詞，不管是顯示器、手機、平板它們的可視區(qū)域范圍都是有限。在這個 有限可視區(qū)域 區(qū)域里做到完美顯示和響應，而在這個區(qū)域外少做一些操作來減少渲染的壓力、網(wǎng)絡請求壓力。在 每日 30 秒之 對海量數(shù)據(jù)進行切割 中的使用場景，我們就是利用了 有限可視區(qū)域 只渲染一部分 DOM 節(jié)點來減少頁面卡頓。 既然 可視區(qū)域 ...
showImg(https://segmentfault.com/img/remote/1460000018836440); 簡介 無障礙、DOM 小細節(jié)、前端開發(fā)、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。 無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...
簡介 字符串、數(shù)字、數(shù)組、對象、時間、類型、等于 科學家發(fā)現(xiàn)，人腦中會分泌多種能讓人感到快樂、安全和成就感的物質，這些物質統(tǒng)稱為快樂素。通常情況下，快樂素的釋放水平很低，維持我們心情平靜。只有當我們完成了預設目標，作為獎勵，大腦才會增加快樂素的分泌，讓人感受到滿足和成功的喜悅。 這是之前看到的一篇關于 大腦獎勵機制 文章的一段話，為了要獲得獎勵我們需要有預設目標，而是每日 30 秒系列也是為了幫助...
showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介 分頁、優(yōu)化、可視區(qū)域、無限加載 寫前端頁面時最經(jīng)常遇到的開發(fā)需求之一就是 渲染后端數(shù)據(jù)返回的數(shù)據(jù)對象，當數(shù)據(jù)對象數(shù)量極多的時候便需要進行分頁。 常見的分頁方式有三種： 在頁面底部生成 上一頁、下一頁、頁面列表 按鈕。 用戶可以很直接的選擇...
閱讀 1146·2019-08-30 12:44
閱讀 653·2019-08-29 13:03
閱讀 2562·2019-08-28 18:15
閱讀 2431·2019-08-26 10:41
閱讀 3092·2019-08-26 10:28
閱讀 3040·2019-08-23 16:54
閱讀 1992·2019-08-23 15:16
閱讀 817·2019-08-23 14:55
