簡介

無障礙、WAI、ARIA、a11y、Accessibility、框架選擇

如何向 視障用戶 介紹兔子長什么樣？有的同學可能會說：

• 毛茸茸的長耳朵。
• 短短圓圓的小尾巴。
• 紅紅的眼睛。

那如何向 視障用戶 介紹網頁長什么樣？有看過 語義化與無障礙樹 的同學可能會說：

• header 標簽表示一個網頁的頁眉。
• main 標簽表示一個網頁的內容。
• footer 標簽表示一個網頁的頁腳。

哎呦不錯哦~ 那你給我表演一下怎么描述 導航 呢？

導航

現在

在 HTML5 語義化標簽的加持下導航可以這樣寫：

<nav><a href="home">主頁</a><a href="users">用戶</a> </nav> 復制代碼

不同用戶理解：

• 普通用戶通過 顯示效果 識別出是導航。
• 程序員通過 nav 標簽 識別出是導航。
• 視障用戶通過 屏幕閱讀器 識別出是導航。

過去

這個時候有同學想過在 <nav> 標簽還沒有出現的時候，只靠 div 和 span 標簽一把梭是時候怎么寫的？

<div class="navigation"><a href="home">主頁</a><a href="users">用戶</a> </div> 復制代碼

不同用戶理解：

• 普通用戶通過 顯示效果 識別出是導航。
• 程序員通過 class="navigation" 識別出是導航。
• 視障用戶通過 屏幕閱讀器 識別出是兩個鏈接。

這對于 視障用戶 多么不友好，他們除了知道有兩個鏈接并不能識別出是導航。

Cosplay

聰明的同學肯定想到了：

• 是否可以指定一個規范？
• 是否可以通過 cosplay 來把 div 標簽 變成 nav 標簽？

確實存在一個規范叫做 Web Accessibility Initiative - Accessible Rich Internet Applications 縮寫 WAI-ARIA，它的作用就和同學們想到的一樣通過角色扮演來描述 html 使得 視力障礙 用戶可以理解 html 所表達的含義。

使用 WAI-ARIA 來表單 nav 標簽，屏幕閱讀器便會幫助視障用戶識別出是導航 ：

<div class="navigation" role="navigation"><a href="home">主頁</a><a href="users">用戶</a> </div> 復制代碼

好奇寶寶

好奇寶寶肯定會問：可是有的頁面有 主導航 和 副導航 甚至還有 面包屑導航、奇奇怪怪不知道什么的導航 正常用戶可以通過視覺秒理解是什么，那視障用戶怎么辦呢？

居然能想到這么厲害的問題，不過沒關系 WAI-ARIA 已經定義好了通過 aria-label 標簽來描述是什么：

<div class="navigation"role="navigation"aria-label="主導航"><a href="home">主頁</a><a href="users">用戶</a> </div> <div class="navigation"role="navigation"aria-label="奇奇怪怪不知道什么的導航"><a href="sister">小姐姐</a><a href="brother">小哥哥</a> </div> 復制代碼

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

轉載于:https://juejin.im/post/5cb63dd96fb9a06851505a43

總結

以上是生活随笔為你收集整理的每日 30 秒 ⏱ HTML Cosplay的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。