WAI-ARIA
Last updated
Last updated
全名為 Accessible Rich Internet Applications,是由W3C (World Wide Web Consortium) 協會的 Web Accessibility Initiative (WAI) 組織訂定所以通常會一起講 WAI-ARIA。
ARIA 是給非視覺使用者,提供角色、狀態和屬性的輔助資訊,有助於使用者更快理解內容。
可以補充 HTML 元素語義,但不是用來取代 HTML 元素,技術上就是添加 HTML attribute 改變 accessibility tree,也就是變更及擴充標準 DOM 無障礙樹狀結構。
具體寫法
上面這個範例我們雖然是用 div ,但賦予他的角色是按鈕,所以在螢幕報讀器中會將其視作按鈕。但並不具備像 <button>
標籤的預設功能
所以,不當的使用會造成比不使用的情況更糟,因為可能會理解錯誤。
所以 ARIA 開宗明義立即指出:
No ARIA is better than Bad ARIA
也就是能用 HTML 做的,就不要用 ARIA,除非原生的有 Bug 或功能不敷使用的需求,用以改善新技術製作的網站內容和應用程式的互動無障礙。
角色 role:定義元素是什麼或做什麼事
button
checkbox
gridcell
link
option
progressbar
radio
scrollbar
searchbox
slider
tab
tabpanel
textbox
banner
...
屬性 Properties:以 aria- 作為前綴名稱,定義元素的屬性,可用來賦予元素額外的意義或語意。
aria-atomic
aria-controls
aria-describedby
aria-details
aria-dropeffect
aria-errormessage
aria-flowto
aria-haspopup
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription
狀態 State:定義目前元素狀態的特殊屬性
aria-busy
aria-current
aria-disabled
aria-grabbed
aria-hidden
aria-invalid
https://www.w3.org/TR/wai-aria-1.2/img/rdf_model