HTML中使用ARIA 標籤做Accessibility

介紹ARIA使用方式：aria-label, aria-labelledby, aria-describedby, aria-owns, aria-hidden with W3C Recommendation

在日常中我們操作web都是看著畫面做操作，但是對於有需要無障礙需求的使用者來說，可能看著畫面操作會非常的吃力，因此為了讓網頁無障礙，因此發展出ARIA，ARIA是Accessible Rich Internet Applications的縮寫。

而ARIA標籤的標準也被寫進去W3C Recommendation：

Accessible Rich Internet Applications (WAI-ARIA) 1.1

列出本人常用的幾個ARIA標籤，並舉出簡單的範例：

aria-label、 aria-labelledby、 aria-describedby、 aria-owns、 aria-hidden

aria-label

動作：選擇Sound選項
結果：會念出”Hi”

aria-label

aria-labelledby

動作：選擇Sound選項
結果：會念出”Display” (id=”menuItem-display”的內容)

aria-labelledby

aria-describedby

動作：選擇Sound選項
結果：會念出”Sound Display”
接在原本該念的地方

aria-describedby

aria-owns

動作：選擇Sound選項
結果：會念出”Sound Display”
動作：選擇Display選項
結果：不會唸

aria-owns

aria-hidden

動作：選擇Sound選項
結果：不會唸

aria-hidden

以上是本人舉的簡單範例，更詳細的說明如下Reference

Reference:

Accessible Rich Internet Applications (WAI-ARIA) 1.1

Using ARIA

WAI-ARIA basics