ARIA: option 角色

option 角色用於標識使用者可以在 listbox 中做出的選擇。這些選項類似於 <option> 元素在 <select> 元素中，但它們可以包含影像。

所有可選擇選項都應具有與狀態匹配的 aria-selected，選中時為 true，未選中時為 false。如果選項不可選擇，則可以省略 aria-selected。已停用的選項可以具有 aria-disabled="true" 和 aria-selected="false" 來告知使用者選項存在，但已停用。

option 角色用於標識 listbox 的可選擇選項。必須為選項提供可訪問的名稱。通常，選項的可訪問名稱應來自元素的後代內容。

作者還可以透過為具有 option 角色的元素指定 aria-label 或 aria-labelledby 來顯式地提供可訪問的名稱。如果使用 aria-label 或 aria-labelledby，並且選項還顯示了可見的文字標籤，則作者必須確保他們遵守 WCAG 成功準則 2.5.3 標籤在名稱中。

強烈建議使用 <select> 元素或 <input> 元素（型別為 checkbox 或 radio），如果可能的話。這些原生 HTML 元素提供了鍵盤互動功能，可以自動為你管理所有後代的焦點。

某些型別的使用者介面元件，在平臺可訪問性 API 中表示時，只能包含文字。可訪問性 API 無法表示 option 中包含的語義元素。為了解決此限制，瀏覽器會自動將角色 presentation 應用於任何 option 元素的所有後代元素，因為它是一個不支援語義子級的角色。

例如，考慮以下包含標題的 option 元素。

<div role="option"><h3>Title of my option</h3></div>

由於 option 的後代是表現性的，因此以下程式碼是等效的

<div role="option"><h3 role="presentation">Title of my option</h3></div>

從輔助技術使用者的角度來看，標題不存在，因為前面的程式碼片段在 可訪問性樹 中等效於以下內容

<div role="option">Title of my option</div>

關聯的角色

listbox

option 必須包含在 listbox 中或由 listbox 擁有

狀態和屬性

aria-selected

用於描述選項的選擇狀態。必需的。

aria-checked

用於描述選項在多選模式下使用時的選中狀態。支援 true、false 和 mixed。可選的。

aria-posinset

用於描述選項在集合中的位置，當該位置與 DOM 不匹配時，例如虛擬滾動，其中一次只顯示一部分選項。可選的。

aria-setsize

與 aria-posinset 一起使用，用於宣告選項的總數。可選的。

aria-disabled

用於指示選項存在但不可編輯。可選的。

aria-hidden

用於從輔助工具中隱藏選項。它應該只用於隱藏不可見的內容，或隱藏可見的內容（如果它改善了輔助技術的體驗，例如冗餘內容）。可選的。

aria-invalid

用於指示選項的值被應用程式認為無效。可選的。

aria-busy

用於指示元素正在被修改，例如在載入時。可選的。

aria-labelledby

用於指示哪個元素為選項建立標籤。如果標籤存在於 DOM 中，則應改用 aria-labelledby。可選的。

aria-label

用於為選項建立標籤。如果標籤存在於 DOM 中，則應改用 aria-labelledby。可選的。

（有關詳細資訊和 ARIA 狀態和屬性的完整列表，請參見 ARIA option（角色） 文件。）

• HTML <select> 元素
• HTML <label> 元素
• HTML <option> 元素
• ARIA：combobox 角色
• ARIA：list 角色
• ARIA：listbox 角色