ARIA: option 角色
option 角色用於 listbox 中可選擇的條目。
描述
option 角色用於識別使用者可以在 listbox 中進行的選擇。這些選項類似於 <select> 元素中的 <option> 元素，但它們可以包含影像。
所有可選擇的選項都應將 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> 元素或帶有 checkbox 或 radio 型別的 <input> 元素。這些原生的 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>
關聯的 ARIA 角色、狀態和屬性
關聯的角色
listbox-
option必須 包含在listbox中或由listbox擁有。
狀態和屬性
aria-selected-
用於描述選項的選中狀態。必需。
aria-checked-
用於描述當選項用於多選時，其選中狀態。支援
true、false和mixed。可選。 aria-posinset-
用於描述選項集中的位置，當它與 DOM 不匹配時，例如虛擬滾動，一次只存在部分選項。可選。
aria-setsize-
與
aria-posinset結合使用，宣告選項的總數。可選。 aria-disabled-
用於指示選項存在但不可編輯。可選。
-
用於將選項隱藏起來，不讓輔助功能工具訪問。它僅應用於隱藏非可見內容，或隱藏可見內容以改善輔助技術的體驗，例如冗餘內容。可選。
aria-invalid-
用於指示應用程式認為選項的值無效。可選。
aria-busy-
用於指示元素正在被修改，例如在載入過程中。可選。
aria-labelledby-
用於指示哪個元素為選項提供了標籤。在適當的情況下，應使用選項的內容代替。可選。
aria-label-
用於標記選項。如果標籤存在於 DOM 中，則應改用
aria-labelledby。可選。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # option |
| 未知規範 |
另見
- HTML
<select>元素 - HTML
<label>元素 - HTML
<option>元素 - ARIA：
combobox角色 - ARIA：
list角色 - ARIA：
listbox角色