Accessibility (親合力)簡單解釋：比如地鐵有大通道方便輪椅通過，比如紅綠燈有聲音提示方便盲人通行，比如鼠標有左手模式方便習慣用左手的人使用。讓更廣泛（生理上有所不同）的人群可以使用，就是 Accessibility。aria-label 是一個 HTML attribute 用來告訴讀屏軟件某個元素是什麼。例如一個關閉按鈕「×」，視覺上看來都能理解，但是讀屏軟件並不能正確讀出，這時就可以用 aria-label
1. aria-label是什麼
1 | <button aria-label="關閉">×</button> |
實際成品
- 讀屏軟件（比如說 Voice Over）就會讀出「按鈕，關閉」。圖片
的 alt 屬性亦有此效果，因為圖片本身是沒有辦法被讀出的，所以讀屏軟件會去閱讀 alt 的內容
- 假如 <img> 標籤同時有 aria-label 與 alt 屬性，那麼讀屏軟件應該閱讀哪個的內容呢？答案當然是 aria-label。這裡需要明白 alt 本身還有另一個作用，當圖片無法加載時，瀏覽器會將 alt 的內容展示給用戶。
2. aria-label 與 title
title 是主要是提示與補充用的，讀屏軟件讀不到 title 對於 Accessibility 毫無幫助，可以考慮將 title 換成 aria-label
1 2 | <a href="#" title="設置"><img src="gear.png"></a> <a href="#" aria-label="設置"><img src="gear.png"></a> |
台灣無障礙還是以 title為主
3. aria-label 與 iconfont
多數網站已經不使用圖片來表示 icon ，轉而使用 iconfont 又或者 svg ，時候需要使用 arial-label 來標注：
1 2 3 4 5 6 7 8 | <a href="#"><i class="icon-gear" aria-label="設置"></i></a> <!-- 可讀到 <i> --> <a href="#" aria-label="設置"><i class="icon-gear"></i></a> <!-- 可讀到 <a> --> <a href="#" aria-label="設置"><i class="icon-gear"></i> 設置</a> <!-- 唸兩遍「設置」 --> <a href="#"><i class="icon-gear" aria-hidden="true"></i> 設置</a> <!-- 唸最後字元「設置」 --> |
aria-hidden="" aria-hidden 字符串。可選值為 true 元素隱藏(不可見) 和 false 表示元素可見
4. aria-label 與表單
placeholder 的出現導致了大量不帶 <label> 的 form 表單，然而讀屏軟件是不會識別 placeholder
1 2 | <input name="username" placeholder="用戶名"> <input name="email" placeholder="郵箱"> |
讀屏軟件看來它只是兩個輸入框，需要用 aria-label 再次標注
1 2 | <input name="username" placeholder="用戶名" aria-label="用戶名"> <input name="email" placeholder="郵箱" aria-label="郵箱"> |
1 2 | <label for="username" class="sr-only">用戶名</label> <input id="username" name="username" placeholder="用戶名"> |
這作法比較近 Bootstrap 的寫法， .sr-only(screen reader only) 這個 class 的標籤，注意不能使用 display: none，否則讀屏軟件會忽略，只在視覺上將其隱藏
資料源：
前端的基礎修養：aria-label