WAI-ARIA
全名為 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
參考來源
Last updated
