（圖片來源：How to Make Custom Accessible Checkboxes and Radio Buttons）

狀態與屬性 States and Properties

2.2 WAI-ARIA States and Properties in WAI-ARIA 1.1
WAI-ARIA provides a collection of accessibility states and properties which are used to support platform accessibility APIs on various operating system platforms. Assistive technologies may access this information through an exposed user agent DOM or through a mapping to the platform accessibility API. When combined with roles, the user agent can supply the assistive technologies with user interface information to convey to the user at any time. Changes in states or properties will result in a notification to assistive technologies, which could alert the user that a change has occurred.

以 aria-* 作為前綴的屬性

這篇文章要來介紹的是關於 ARIA 的 States 與 Properties。

其實這兩個東西都是以 aria-* 作為前綴，並可以加在 HTML 標籤上的屬性（Attribute），基本上會直接以「屬性（Attribute）」一詞作為代稱。人家問你說「欸欸欸，你知道 ARIA 的屬性是指什麼嗎？」其實 ARIA 的屬性就是代表 States 與 Properties 這兩個字的合體！

因為 Property 和 Attribute 在中文常被翻成同一個字——「屬性」，在當初學習時，常常造成混淆。所以在這篇文章中，屬性代表的是 Attribute、Attribute、Attribute！

States 與 Properties 代表不同意義

那你一定會奇怪，上面既然說這兩個字可以用「屬性」一詞作為代稱，又何必要分成兩個字呢？因為：State 和 Property 在概念上完全不同。

• Property 在整個應用程式生命週期中被更改的可能性通常小於 State。它表達的更多是元素與元素之間的關係，或是補充關於該元素的資訊。
  • 比如說 aria-label="This is an apple." ，補充該元件的更多說明。
  • 裡頭填寫的值是通常一個具體的內容或 id。
• State 代表狀態，是可由使用者操作過程中而變動的。
  • 比如說，我們自己刻的 checkbox 有沒有被使用者勾選啦？我們會將這個勾選框的角色設為 role="checkbox" ，再設好狀態的預設值 aria-checked="false"。被使用者操作之後，我們透過 JavaScript 將值改成 true ，那麼螢幕閱讀器就能念出來讓使用者知道，「哦～我現在有選到這個東西了」。
  • 裡頭填寫的值是通常是布林值或是三類值（Tristate： true 、 false 、 mixed ）。

上述並不是寫死的規則，但是這是一個我們可以拿來簡易理解 State 和 Property 性質差異的原則。

State 和 Property 的分類

State 和 Property 一定要和 Role 來做搭配！這三個是要賦予給「當原生 HTML 標籤無法表明它的功能與含義時」，拿來修改或補充在 Accessibility Tree 的。

以「 ＊ 米字號 」結尾的屬性無法於 HTML5 中使用。

• 不論什麼角色都可以搭配的屬性列表：
  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-current (state)
  • aria-describedby ＊
  • aria-details
  • aria-disabled (state)
  • aria-dropeffect
  • aria-errormessage
  • aria-flowto ＊
  • aria-grabbed (state) ＊
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-keyshortcuts
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns ＊
  • aria-relevant ＊
  • aria-roledescription

ARIA 的屬性四個類型

查看每個屬性在官方文件的詳細定義；MDN 也有一個清楚的屬性列表，可是針對每個屬性的解說還缺很多，倒是 Role 的每項說明很清楚。

1. Widget Attributes 組件屬性：常見使用者界面元素的屬性， 這些屬性用於支援組件角色。
   • aria-autocomplete
   • aria-checked
   • aria-disabled
   • aria-errormessage
   • aria-expanded ＊
   • aria-haspopup
   • aria-hidden
   • aria-invalid
   • aria-label ＊
   • aria-level ＊
   • aria-modal
   • aria-multiline
   • aria-multiselectable
   • aria-orientation ＊
   • aria-placeholder
   • aria-pressed
   • aria-readonly
   • aria-required
   • aria-selected
   • aria-sort ＊
   • aria-valuemax
   • aria-valuemin
   • aria-valuenow
   • aria-valuetext
2. Live Region Attributes 活動區域屬性：以下屬性可以應用於任何元素。 這些屬性的目的是表明內容更改可能在沒有焦點的元素的情況下發生，並向輔助技術提供關於如何處理這些內容更新的訊息。
   • aria-atomic
   • aria-busy ＊
   • aria-live ＊
   • aria-relevant
3. Drag-and-Drop Attributes 拖放屬性：以直觀方式告訴輔助工具「可拖移的元素」及「其拖放的目標」。
   • aria-dropeffect` ＊
   • aria-grabbed`
4. Relationship Attributes 關係屬性：網頁結構中元素間關聯不明確，這些屬性可以建立元素之間的關係或關聯。
   • aria-activedescendant ＊
   • aria-colcount
   • aria-colindex
   • aria-colspan
   • aria-controls
   • aria-describedby ＊
   • aria-details
   • aria-errormessage
   • aria-flowto ＊
   • aria-labelledby ＊
   • aria-owns ＊
   • aria-posinset ＊
   • aria-rowcount
   • aria-rowindex
   • aria-rowspan
   • aria-setsize ＊

番外篇：做個 ARIA 屬性的比較

屬性太多了，先就這兩個 ARIA 屬性進行比較，剩下的就留給實作時慢慢介紹啦～～

aria-label

用途

• 指定用作可訪問標籤的字，與 aria-labelledby 相同意思。

使用

• 定義一字串作為元素的描述，如 <ul role="navigation" aria-label="This is a pagination list">...</ul>

aria-labelledby

用途

• 標示另一個元素的內容是此元素的敘述，如<ul role="navigation" aria-labelledby="paginglabel">...</ul>。

使用

• 對於區塊的描述存在於頁面上就用 aria-labelledby。
• 值通常為可視元素的 id，如<p id="paginglabel"></p>。

備註

• 用途雖與 aria-label 相同，但當兩個屬性都存在時，根據 accessible name 演算法，aria-labelledby 的權重比較高。
• aria-label 比 aria-labelledby 更加簡潔。

Reference

• WAI-ARIA 1.1 -W3C
• ARIA - MDN
• HTML5 and the myth of WAI-ARIA redundance