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 無障礙樹狀結構。

source: web.dev https://web.dev/articles/semantics-aria?hl=zh-tw

source: web.dev https://web.dev/articles/semantics-aria?hl=zh-tw

具體寫法

<div role="button">Place Order</div>

上面這個範例我們雖然是用 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

參考來源

• https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/

• https://medium.com/a11yvillage/8d92fded7a8

• https://medium.com/a11yvillage/92d2e6d6874a

• https://www.w3.org/WAI/ARIA/apg/patterns/

• https://accessibility.moda.gov.tw/Download/GetFile/6035?name=03-%E7%B6%B2%E7%AB%99%E7%84%A1%E9%9A%9C%E7%A4%99%E8%88%87WAI-ARIA%E6%87%89%E7%94%A8-v1 軟協 WAI-ARIA 無障礙教學

• https://developers.google.com/web/fundamentals/accessibility/semantics-aria?hl=zh-tw

• https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-breadcrumbs

• https://codepen.io/collection/mrbekM?grid_type=list

• https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/

• https://ithelp.ithome.com.tw/users/20108045/ironman/2454

• https://www.w3.org/TR/html-aria/

• https://www.w3.org/TR/html-aam/

• https://w3c.github.io/html-aam/#accessible-name-and-description-computation