資訊專欄INFORMATION COLUMN
簡介
無障礙、WAI、ARIA、a11y、Accessibility、框架選擇
如何向 視障用戶 介紹兔子長什么樣？有的同學(xué)可能會說：
毛茸茸的長耳朵。
短短圓圓的小尾巴。
紅紅的眼睛。
那如何向 視障用戶 介紹網(wǎng)頁長什么樣？有看過 語義化與無障礙樹 的同學(xué)可能會說：
header 標簽表示一個網(wǎng)頁的頁眉。
main 標簽表示一個網(wǎng)頁的內(nèi)容。
footer 標簽表示一個網(wǎng)頁的頁腳。
哎呦不錯哦~ 那你給我表演一下怎么描述 導(dǎo)航 呢？
導(dǎo)航 現(xiàn)在在 HTML5 語義化標簽的加持下導(dǎo)航可以這樣寫：
不同用戶理解：
普通用戶通過 顯示效果 識別出是導(dǎo)航。
程序員通過 nav 標簽 識別出是導(dǎo)航。
視障用戶通過 屏幕閱讀器 識別出是導(dǎo)航。
過去這個時候有同學(xué)想過在 標簽還沒有出現(xiàn)的時候，只靠 div 和 span 標簽一把梭是時候怎么寫的？
不同用戶理解：
普通用戶通過 顯示效果 識別出是導(dǎo)航。
程序員通過 class="navigation" 識別出是導(dǎo)航。
視障用戶通過 屏幕閱讀器 識別出是兩個鏈接。
這對于 視障用戶 多么不友好，他們除了知道有兩個鏈接并不能識別出是導(dǎo)航。
Cosplay聰明的同學(xué)肯定想到了：
是否可以指定一個規(guī)范？
是否可以通過 cosplay 來把 div 標簽 變成 nav 標簽？
媽耶你們也真的是太聰明啦！確實存在這一個規(guī)范叫做 Web Accessibility Initiative - Accessible Rich Internet Applications 縮寫 WAI-ARIA，它的作用就和同學(xué)們想到的一樣通過角色扮演來描述 html 使得 視力障礙 用戶可以理解 html 所表達的含義。
使用 WAI-ARIA 來表單 nav 標簽，屏幕閱讀器便會幫助視障用戶識別出是導(dǎo)航 ：
好奇寶寶
好奇寶寶肯定會問：可是有的頁面有 主導(dǎo)航 和 副導(dǎo)航 甚至還有 面包屑導(dǎo)航、奇奇怪怪不知道什么的導(dǎo)航 正常用戶可以通過視覺秒理解是什么，那視障用戶怎么辦呢？
媽耶你們真的是有夠聰明，居然能想到這么厲害的問題，不過沒關(guān)系 WAI-ARIA 已經(jīng)定義好了通過 aria-label 標簽來描述是什么：
WAI-ARIA
可能還是有同學(xué)不是很能理解 WAI-ARIA 是什么，簡單來說 WAI-ARIA 便是視障用戶的 UI：
| 用戶 | 兔子 | 頁面 |
|---|---|---|
| 普通用戶 | 看到兔子樣子 | 看到頁面效果 |
| 視障用戶 | 知道兔子構(gòu)成 | 知道頁面構(gòu)成 |
通過上面的導(dǎo)航例子也大概知道了 WAI-ARIA 的使用方法，但是 WAI-ARIA 并沒有這么簡單，它其實定義了一系列的屬性和角色來幫助 視力障礙 用戶理解頁面，只不過導(dǎo)航的結(jié)構(gòu)比較簡單，如果像是復(fù)雜一點的 多項選擇 除了要使用 WAI-ARIA 規(guī)定的標簽，還有實現(xiàn) WAI-ARIA 規(guī)定的 焦點、鍵盤事件 等。
更多內(nèi)容可以閱讀 WAI-ARIA 這份文檔算是詳細描述了所有的規(guī)則，如果覺得復(fù)雜可以閱讀 WAI-ARIA 實踐，如果覺得英語看不來可以閱讀 餓了么前端團隊翻譯的 WAI-ARIA 實踐。
題外話 關(guān)于學(xué)習(xí)有的人很奇怪對事物的認識取決于第一次，比如小二先接觸的 LOL 后面玩 DotA 對正反補兵很不適應(yīng)。所以在小二看來應(yīng)該在學(xué)習(xí) HTML 的時候應(yīng)該穿插部分 WAI-ARIA 內(nèi)容，在學(xué)習(xí)部分 JavaScript 后應(yīng)該穿插實現(xiàn)幾個 WAI-ARIA 規(guī)定的角色，當然現(xiàn)在學(xué)習(xí)也不遲。
現(xiàn)實情況如果大家有追更小二就會記得：
扼住焦點的喉嚨 挑選框架時提到的 Element UI 部分語義化做的還不錯。
如果你真的點進去上文提到的 餓了么前端團隊翻譯的 WAI-ARIA 實踐 你就會發(fā)現(xiàn)：這個項目停止在了 2018年7月26日 而且沒有完全翻譯完。
可能是因為某些原因?qū)е碌?，但是通過閱讀 餓了么前端團隊翻譯的 WAI-ARIA 實踐 在每篇文章底部 Example 中重復(fù)出現(xiàn) Material 和 Element，小二個人能感受到的是翻譯這篇文章和寫相關(guān)代碼同學(xué)對幫助 無障礙群體的熱情。
社會挺現(xiàn)實的大家都忙忙碌碌、加班賺錢有很多需要的事情要去做小二也不例外，無障礙可能是個遙遠的話題。小二這幾篇文章也只能是幫大家認識一下這個群體和給出相關(guān)的知識，本來還想講一下 無障礙視覺設(shè)計 相關(guān)內(nèi)容，但是 魚頭哥哥 最近分享了幾篇相關(guān)文章都挺好的。
期望如果可以使用 heading 和 語義化、圖片加上 alt 也挺好。
如果還可以選擇一個無障礙做得好的框架，比如二哲哥哥常說的 material ui。
如果挺可以選擇閱讀 material ui 源碼和 WAI-ARIA。
最后希望魚頭哥哥的 無障礙世界 可以實現(xiàn)。
無障礙相關(guān)內(nèi)容H1 の 小秘密
img の 小九九
無障礙世界
扼住焦點的喉嚨
語義化與無障礙樹
HTML Cosplay
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103592.html
showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 簡介 安全、注入攻擊、XSS 13歲女學(xué)生被捕：因發(fā)布 JavaScript 無限循環(huán)代碼。 這條新聞是來自 2019年3月10日 很多同學(xué)匆匆一瞥便滑動屏幕去看下一條消息了，并沒有去了解這段代碼是什么，怎么辦才能防止這個問題。事情發(fā)生后為了抗議日本...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優(yōu)化、簡單教程 細心的同學(xué)可能發(fā)現(xiàn)了開頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學(xué)們有沒有想過互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個網(wǎng)站 internet live stats 里面實時的給出了...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優(yōu)化、簡單教程 細心的同學(xué)可能發(fā)現(xiàn)了開頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學(xué)們有沒有想過互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個網(wǎng)站 internet live stats 里面實時的給出了...
showImg(https://segmentfault.com/img/remote/1460000018653055?w=900&h=500); 簡介 字符編碼、字符長度錯誤、截取字符錯誤、UTF8、Unicode 計算機重重底層之下都是由 0 和 1 組合，但是你知道他們是怎么一步步變成字符串的嘛？在我們現(xiàn)實生活中最常見的例子可以通過 wo 在新華字典中找到 我 這個字。同樣計算機通過 0 ...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標簽、SEO、無障礙閱讀 ps: 內(nèi)容有點多，本來只想講一個點，但是關(guān)聯(lián)性太強了，所以辛苦大家了。 在學(xué)習(xí) HTML 標簽的時候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認識 HTM...
閱讀 869·2021-11-25 09:44
閱讀 1086·2021-11-19 09:40
閱讀 7117·2021-09-07 10:23
閱讀 1991·2019-08-28 17:51
閱讀 1118·2019-08-26 10:59
閱讀 1943·2019-08-26 10:25
閱讀 3149·2019-08-23 18:22
閱讀 875·2019-08-23 16:58
