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