每日 30 秒 ⏱ HTML Cosplay

簡介

無障礙、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