每日 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