ARIA：combobox 角色
combobox 角色用於標識一個元素，該元素可以是 input 或 button，它控制另一個可以動態彈出以幫助使用者設定值的元素，例如 listbox 或 grid。組合框可以是可編輯的（允許文字輸入）或僅選擇的（僅允許從彈出列表中選擇）。
描述
combobox 是一個複合控制元件，它將一個命名的輸入欄位與一個提供該輸入欄位可能值的彈出視窗相結合。此控制元件的目的是透過幫助使用者選擇一個值而不必鍵入完整值來改善使用者體驗，並且（取決於支援的值是否有限）還可以防止使用者輸入無效或其他不支援的值。
combobox 角色可以設定在輸入元素（用於可編輯的組合框）或按鈕元素（用於僅選擇的組合框）上。此元素控制另一個元素，例如列表框或網格，該元素可以動態彈出以幫助使用者設定值。
具有 combobox 角色的元素可以是可編輯的單行文字欄位（使用 <input> 元素，類似於帶有 <datalist> 的元素），或者僅選擇的元素（使用 button 元素），該元素僅顯示當前值而不允許直接文字輸入。
WAI-ARIA 組合框僅需要一個屬性：aria-expanded。但是，根據實現情況，通常還需要其他幾個屬性：aria-haspopup、aria-controls、aria-activedescendant 和 aria-autocomplete。
通常，組合框的初始狀態是摺疊的，並設定了 aria-expanded="false"。在摺疊狀態下，只有組合框元素和可選的用於呼叫彈出視窗的兄弟按鈕可見。aria-expanded 屬性的值設定為 false，在摺疊時是必需的，因為它向輔助技術指示該控制元件是可展開的。
當顯示組合框元素（顯示其當前值）及其關聯的彈出視窗元素時，組合框處於展開狀態。展開時，必須設定 aria-expanded="true"。
與 combobox 關聯的彈出視窗元素可以是 listbox、tree、grid 或 dialog 元素。
組合框具有隱式的 aria-haspopup 值 listbox，因此如果彈出視窗是 listbox，則包含此屬性是可選的。如果組合框彈出視窗元素是 tree、grid 或 dialog（除了 listbox 之外的任何內容），則 aria-haspopup 屬性是必需的。aria-haspopup 的值必須是 tree、grid、dialog 或 listbox 角色之一。請注意，對於此屬性，true 意味著 menu，因此請確保該值對應於彈出視窗的角色，而不是布林值。
當組合框的彈出視窗顯示時，請確保組合框元素上的 aria-controls 屬性設定為彈出視窗 listbox、tree、grid 或 dialog 元素的 id。這就是指示具有 combobox 角色的元素與其控制的彈出視窗之間的關係的方式。（注意：在舊的 ARIA 規範中，它是 aria-owns 而不是 aria-controls，因此您可能會在舊的組合框實現中看到 aria-owns。程式碼中的 aria-owns 應更新為 aria-controls！）
如果組合框 UI 包含可見控制元件（例如圖示），該控制元件允許透過指標和觸控事件控制彈出視窗的可見性，則該控制元件應為一個 <button>、型別為 button 的 <input>，或一個具有 -1 的 tabindex 的 button 角色元素。這樣做將允許按鈕可聚焦，但不會包含在鍵盤的 Tab 鍵順序中。它不應是具有 combobox 角色的元素的後代。
為了實現鍵盤可訪問性，必須透過程式設計實現鍵盤支援，以在 combobox 元素和彈出視窗 listbox、tree、grid 或 dialog 中包含的元素之間移動焦點。一個常見的約定是 向下箭頭 將焦點從輸入框移動到彈出視窗元素的可聚焦的第一個後代。
aria-activedescendant 屬性可用於標識組合框彈出視窗當前活動的元素，例如彈出視窗 listbox 中的 option，適用於 DOM 焦點保留在組合框上的實現。如果呼叫彈出視窗時 DOM 焦點沒有保留在組合框上，而是 DOM 焦點移動到彈出視窗（例如對話方塊）中，則可能不需要 aria-activedescendant。
如果組合框實現為可編輯的 <input> 元素，則組合框的值就是輸入的該值。對於使用 button 元素實現的僅選擇組合框，該值來自彈出視窗中選定的選項。
aria-autocomplete 屬性僅適用於支援文字輸入的、可編輯的組合框。對於這些組合框，將該屬性設定為對應於提供的行為的值：inline、list 或 both。該屬性表示輸入文字將觸發一個或多個使用者意圖值的預測顯示，並指定這些預測將如何呈現。對於使用 button 元素的僅選擇組合框，不應使用 aria-autocomplete，因為無法進行文字輸入。
每個 combobox 都必須有一個可訪問的名稱，可以透過以下三種方式之一提供：
- 對於
<input>元素，使用關聯的<label>。 - 如果 UI 中存在可見標籤，請使用
aria-labelledby引用標籤元素的id。 - 如果不存在可見標籤，請使用
aria-label。
注意：僅使用其中一種方法；不要組合使用。
關聯的 WAI-ARIA 角色、狀態和屬性
aria-expanded-
必需。標識組合框是開啟（
true）還是關閉（false）。 aria-haspopup-
隱含。如果省略，則預設為
listbox。還支援tree、grid或dialog。標識組合框具有彈出視窗，並指示其型別。
鍵盤互動
- 向下箭頭
-
如果組合框關閉，則開啟彈出視窗並將焦點移至下一個選項，如果未選擇任何選項，則移至第一個選項。
- Alt + 向下箭頭（可選）
-
如果彈出視窗可用但未顯示，則顯示彈出視窗而不移動焦點。
- 向上箭頭
-
如果組合框關閉，則開啟彈出視窗並將焦點移至上一個選項，如果未選擇任何選項，則移至最後一個選項。
- Alt + 向上箭頭（可選）
-
如果彈出視窗有焦點，則將焦點返回到組合框；否則，關閉彈出視窗。
- Escape
-
如果組合框開啟，則關閉彈出視窗。如果彈出視窗已關閉，則清除可編輯組合框的值。
可編輯組合框鍵盤互動
- Enter
-
如果在彈出視窗中選擇了自動完成建議，則透過更新組合框的值並將其輸入游標放在末尾來接受該建議。還可能觸發預設操作（例如，在訊息應用程式中，將接受的值新增到收件人列表中）。
- 製表符
-
接受當前值並將焦點移至下一個可聚焦的元素。
僅選擇組合框鍵盤互動
- Enter 或 Space
-
當彈出視窗關閉時，開啟彈出視窗。當彈出視窗開啟且選中了一個選項時，接受所選選項作為組合框的值並關閉彈出視窗。
- 製表符
-
接受當前選擇並將焦點移至下一個可聚焦的元素。
- Home 或 End
-
當彈出視窗開啟時，分別將焦點移至第一個或最後一個選項。
示例
<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
<input
type="text"
id="jokes"
role="combobox"
aria-controls="joketypes"
aria-autocomplete="list"
aria-expanded="false"
data-active-option="item1"
aria-activedescendant="" />
<span aria-hidden="true" data-trigger="multiselect"></span>
<ul id="joketypes" role="listbox" aria-label="Jokes">
<li class="active" role="option" id="item1">Puns</li>
<li class="option" role="option" id="item2">Riddles</li>
<li class="option" role="option" id="item3">Observations</li>
<li class="option" role="option" id="item4">Knock-knock</li>
<li class="option" role="option" id="item5">One liners</li>
</ul>
</div>
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # combobox |
| 未知規範 |
另見
- HTML
<label>元素 - HTML
<select>元素 - HTML
<option>元素 - HTML
<input>元素 - ARIA：
listbox角色 - ARIA：
option角色 - ARIA：
list角色 - ARIA：
listitem角色 - ARIA 最佳實踐 – 組合框
- Deque 提供的可訪問組合框模組示例