ARIA：下拉組合框角色

combobox 角色將元素標識為一個控制另一個元素（例如 listbox 或 grid）的 input，該元素可以動態彈出以幫助使用者設定該 input 的值。

描述

combobox 是一個複合小部件，它將一個命名的輸入欄位與一個彈出視窗相結合，該彈出視窗提供該輸入欄位的可能值。該小部件的目的是透過幫助使用者在無需輸入完整值的情況下選擇值，並（可選地，根據支援的值是否有限）防止使用者輸入無效或不支援的值來改善使用者體驗。

combobox 角色設定為控制另一個元素（例如列表框或網格）的輸入，該元素可以動態彈出以幫助使用者設定輸入的值。

combobox 輸入欄位可以是支援編輯和鍵入的單行文字欄位，類似於 HTML <input> 以及 <datalist>，或者僅顯示下拉組合框當前值的元素。

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> 或 button 角色元素，其 tabindex 為 -1。這樣做將使按鈕可聚焦，但不會包含在鍵盤製表符順序中。它不能是具有角色 combobox 的元素的後代。

為了實現鍵盤可訪問性，必須對下拉列表、樹狀結構、網格或對話方塊等彈出式元素中的組合框輸入欄位元素之間的焦點移動進行鍵盤支援程式設計。一種常見的約定是，向下箭頭將焦點從輸入欄位移動到彈出式元素的第一個可獲得焦點的後代元素。

可以使用 aria-activedescendant 屬性標識組合框彈出式視窗中當前活動的元素，例如彈出式下拉列表中的一個option元素，適用於 DOM 焦點仍然保留在組合框上的實現。如果在呼叫組合框的彈出式視窗時，DOM 焦點沒有保留在組合框上，而是移到了彈出式視窗中，例如對話方塊，那麼可能不需要 aria-activedescendant 屬性。

如果組合框元素是 <input> 元素，則組合框的值就是輸入欄位的值。否則，組合框的值來自其後代元素。

如果組合框支援文字輸入並提供自動完成功能，請在組合框元素上設定 aria-autocomplete 屬性，使其值為與提供的行為相對應的值：inline、list 或 both。aria-autocomplete 屬性表明輸入文字將觸發對使用者為組合框意圖值的預測的顯示，並指定預測在生成時的呈現方式。

每個組合框都必須有可訪問的名稱。如果使用 <input> 元素，則可訪問的名稱應來自關聯的 <label> 元素。如果不是這種情況，如果內容中可見一個合適的標籤，則透過 aria-labelledby 屬性提供名稱。換句話說，如果使用者介面中存在一個元素用作組合框輸入欄位的標籤，請在具有 combobox 角色的元素上包含 aria-labelledby 屬性，並將該屬性的值設定為標籤元素的 id 屬性。如果不存在可見的標籤，請使用 aria-label 屬性代替。但不能同時使用這兩個屬性。

關聯的 WAI-ARIA 角色、狀態和屬性

aria-expanded

必需。標識組合框是開啟的 (true) 還是關閉的 (false)。

aria-haspopup

隱含。如果省略，預設為 listbox。也支援 tree、grid 或 dialog。標識組合框具有彈出式視窗，並指示其型別。

鍵盤互動

向下箭頭

將焦點移動到下一個選項，如果未選中任何選項，則移動到第一個選項。

Alt + 向下箭頭 (可選)

如果彈出式視窗可用但未顯示，則顯示彈出式視窗，但不會移動焦點。

向上箭頭

將焦點移動到上一個選項。如果焦點最初位於最後一個選項上，則將焦點移動到第一個選項。

Alt + 向上箭頭 (可選)

如果彈出式視窗獲得焦點，則將焦點返回到組合框，否則關閉彈出式視窗。

回車鍵

如果組合框可編輯，並且在彈出式視窗中選擇了自動完成建議，則透過將輸入游標放置在組合框中已接受的值的末尾，或透過對該值執行預設操作來接受該建議。例如，在訊息傳遞應用程式中，預設操作可能是將已接受的值新增到訊息收件人列表中，然後清除組合框，以便使用者可以新增其他收件人。

示例

html
<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
未知規範
未知規範

參見