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