跳到主要內容

Combobox

Demo 與 Accessibility Tree

Accessibility Tree

觀察對象：Combobox 的輸入元件。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：彈出的建議清單。 下列是操作之後會量到的值。

Role
listbox
Status
（無狀態）
Name
縣市建議
Description
（無 accessible description）

Accessibility Tree

觀察對象：目前自動選取的建議值。 下列是操作之後會量到的值。

Role
option
Status
aria-selected=true
Name
臺北市
Description
（無 accessible description）

選擇出發日期

選好之後按確定，按取消則保留原本的日期。

可選的出發日期

Accessibility Tree

觀察對象：對話框型的輸入元件。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：它開出來的對話框。 下列是操作之後會量到的值。

Role
dialog
Status
（無狀態）
Name
選擇出發日期
Description
選好之後按確定，按取消則保留原本的日期。

鍵盤操作

按鍵行為
Tab移入與移出輸入框。整個 Combobox 只佔一個停留點 —— 建議值不可聚焦，展開鈕的 tabindex 是 -1。離開時若有自動選取的建議值，它會成為這個欄位的值。
任意字元輸入即篩選，並展開建議清單。第一個建議值自動成為選取狀態，這就是 aria-autocomplete=list 加上自動選取的行為。
↓ / ↑清單已展開時在建議值之間移動；收起時展開清單。焦點一直留在輸入框裡，由 aria-activedescendant 指出目前是哪一個 —— 使用者才能一邊看建議一邊繼續打字。
Alt + ↓只展開清單，不移動選取。使用者要的是「先讓我看看有什麼」。
Enter選取目前作用中的建議值，並收起清單。
Esc第一次收起清單，第二次清掉已輸入的文字。一次全清會讓誤按的人失去整段打好的字。對話框型則是關閉對話框、焦點回到輸入框，且保留原值。

ARIA 屬性

屬性值用途
rolecombobox放在接收輸入並顯示目前值的那個元素上，也就是 <input> 本身，不是外層的 wrapper。放錯地方的話，螢幕閱讀器報讀的名稱與值會對不上。
aria-expandedtrue / false彈出內容的顯示狀態。這是整組屬性裡唯一會隨操作改變的，所以它是面板 Status 列上看得到的那一個。
aria-controls彈出內容的 id指向被這個 combobox 展開與收起的那塊內容。
aria-haspopup（省略）/ dialog彈出內容是 listbox 時省略 —— role=combobox 的隱含值就是 listbox。grid、tree、dialog 三種必須明寫，使用者得先知道按下去會開什麼。它是 property 不是 state，不隨操作改變，所以不出現在 Status 列。
aria-autocompletelist必須如實反映實際行為。none 是建議值不隨輸入改變；list 是清單會依輸入篩選；both 是除了清單還會在游標後方顯示行內完成字串。標成 both 卻沒有那個字串，等於告訴使用者一個不存在的功能。
aria-activedescendant作用中建議值的 id焦點留在輸入框，由這個屬性指出清單裡目前作用中的是哪一個。Combobox 不能用 roving tabindex —— 焦點一移到選項上，使用者就不能繼續打字了。
label（可見標籤）縣市 / 出發日期input 類元件優先用原生 <label> 提供名稱，而不是 aria-labelledby。名稱必須與目前值分得開 —— 使用者要同時聽到「縣市」和「臺北市」，否則不知道這個值屬於哪個欄位。
aria-label（彈出清單）縣市建議彈出的 listbox 自己也要有名稱。它不共用 combobox 的名稱，螢幕閱讀器把它當成另一個容器報讀。
aria-selected（建議值）true / false哪一個建議值是選取狀態。grid 型的彈出內容也用它，但選取範圍跟著焦點走：每格代表一個建議值時選取那一格，整列描述同一個建議值時選取那一列。
aria-readonly（對話框型）readonly值只能從對話框選，所以輸入框是唯讀。用 readOnly 而非 disabled —— disabled 的元素不可聚焦，鍵盤使用者就打不開對話框了。

WCAG 對應

  • 等級 A1.3.1 資訊及關聯性

    輸入框與彈出內容以 aria-controls 關聯，建議值與清單的隸屬關係以 role 表達。

  • 等級 A2.1.1 鍵盤

    輸入、篩選、展開、選取與取消都能只用鍵盤完成。

  • 等級 A2.4.3 焦點順序

    焦點全程留在輸入框；對話框型在開啟時把焦點移入對話框，關閉後移回輸入框。

  • 等級 A3.2.2 輸入時

    自動選取的建議值只在離開欄位時成為值，不會在輸入過程中改變焦點或送出表單。

  • 等級 A4.1.2 名稱、角色、值

    輸入元件具備 combobox 角色與來自 label 的名稱，展開狀態以 aria-expanded 表達，作用中的建議值以 aria-activedescendant 指出。

APG 規則

  • 元件語意

    Grid 型彈出內容依建議值的呈現方式決定選取範圍

    在 Grid 型彈出內容中，選取狀態跟隨焦點移動。若每個儲存格各代表一個不同的建議值，焦點所在的儲存格即為選取狀態；若同一列的所有儲存格描述的是同一個建議值，則該列、或該列中代表建議值的儲存格為選取狀態。

  • 焦點管理

    Tree 型彈出內容在不可選取的分類節點上區分焦點與選取

    焦點移至不可作為建議值選取的父節點或分類節點時，須為「維持原本已選取的節點不變」或「沒有任何值被選取」兩者之一。且畫面上焦點樣式與選取樣式必須有明顯可辨識的差異，讓使用者能清楚判斷目前是否已選取某個值。

  • 焦點管理

    Combobox 的對話框型彈出內容實作 Modal Dialog Pattern

    若 Combobox 使用對話框型彈出內容，對話框的焦點移入、焦點循環、關閉方式及其他鍵盤操作符合 Modal Dialog Pattern。

  • 焦點管理

    Combobox 對話框完成或取消後將焦點移回並正確處理值

    在對話框型彈出內容中執行可指定 Combobox 值的動作（例如按下確定按鈕）後，對話框關閉、焦點移回 Combobox，且該值帶入 Combobox。取消對話框（按 Escape 鍵或啟用取消按鈕）時，焦點同樣移回 Combobox，且須為「保留原值不變」或「清除 Combobox 的值」兩者之一。

  • 元件語意

    Combobox 輸入元件具有 combobox 角色語意

    接收使用者輸入並顯示目前值的元素，須具有 role="combobox" 或等效的 HTML 原生語意。

  • 元件語意

    Combobox 的 aria-haspopup 與彈出內容類型一致

    彈出內容為 role="grid"、role="tree" 或 role="dialog" 時，Combobox 須將 aria-haspopup 設為相對應的值（grid、tree 或 dialog）。彈出內容為 role="listbox" 時可省略，因為 role="combobox" 的 aria-haspopup 隱含值即為 listbox。

  • 元件語意

    Combobox 的 aria-expanded 反映彈出內容的顯示狀態

    彈出內容隱藏時，Combobox 須設定 aria-expanded="false"；彈出內容可見時須設定為 true。

  • 元件語意

    Combobox 具有與目前值可區分的無障礙名稱

    Combobox 若有可見標籤，且其元素為可用 HTML label 元素標示的元素（例如 input），須使用 label 元素提供無障礙名稱；否則以 aria-labelledby 指向該可見標籤；若無可見標籤，則以 aria-label 提供名稱。Combobox 的無障礙名稱須與其目前值有所區別，讓輔助科技使用者在元件預設狀態下能同時得知名稱與值。

  • 元件語意

    Combobox 的 aria-autocomplete 與其自動完成行為一致

    可編輯的 Combobox 須依其自動完成行為設定 aria-autocomplete：彈出內容中的建議值不隨輸入字元改變時設為 none；彈出內容會提供對應輸入字元的建議值清單時設為 list；除建議值清單外，還會在輸入游標後方顯示行內完成字串時設為 both。

  • 元件語意

    自動選取的建議值在 Combobox 失去焦點時成為其值

    可編輯的 Combobox 採用「list 自動完成並自動選取」行為時，彈出內容出現後第一個建議值會自動標示為選取狀態；Combobox 失去焦點時，該自動選取的建議值即成為 Combobox 的值，除非使用者另行選擇了其他建議值、或修改了已輸入的文字。

  • 元件語意

    行內自動完成字串以視覺反白與選取狀態呈現

    Combobox 設定 aria-autocomplete="both" 時，所選建議值中使用者尚未輸入的部分（完成字串）會接在輸入游標後方以行內方式顯示，且須以視覺反白呈現並具有選取狀態。

  • 焦點管理

    Combobox 是彈出內容在頁面 Tab 順序中的唯一進入點

    以 Tab 導覽頁面時，可進入 Combobox，但彈出內容不會另外成為頁面 Tab 停駐點。

  • 鍵盤操作

    Combobox 可用向下鍵移至彈出內容的第一個或下一個項目

    若有彈出內容，聚焦 Combobox 後按向下鍵，焦點會移至適當的第一個可聚焦建議；若已有自動選取的建議，則移至該建議後的下一個項目。

  • 鍵盤操作選做

    Combobox 可用向上鍵移至彈出內容的前一個項目

    有彈出內容時，聚焦 Combobox 後按向上鍵，焦點會移至彈出內容最後一個可聚焦項目。

  • 鍵盤操作選做

    Combobox 支援 Alt+方向鍵開關彈出內容

    Alt+向下鍵會開啟彈出內容且不移動焦點；需要時，Alt+向上鍵會關閉彈出內容並將焦點移回 Combobox。

  • 鍵盤操作

    Listbox、Grid 或 Tree 型彈出內容按 Enter 接受已選取的建議

    在 Listbox 或 Grid 型彈出內容中，按 Enter 會接受目前焦點所在或已選取的建議、關閉彈出內容，並將接受的值放入 Combobox。在 Tree 型彈出內容中，按 Enter 會接受可選取的建議。

  • 鍵盤操作

    可編輯的 Combobox 保留平台標準的文字編輯操作

    在可編輯的 Combobox 中，可列印字元與平台標準的單行文字編輯按鍵（輸入、游標移動、選取、文字修改）皆可正常編輯其值。JavaScript 不得攔截這些按鍵事件而干擾瀏覽器原生的文字編輯行為。

  • 鍵盤操作

    可編輯 Combobox 的彈出內容開開啟時可同時接收輸入字元

    可編輯的 Combobox 在焦點位於 Listbox、Grid 或 Tree 型彈出內容時，輸入任一可列印字元，焦點會移回 Combobox 輸入框，彈出內容維持開啟不關閉，且該字元會輸入至輸入框中。

  • 鍵盤操作

    不可編輯 Combobox 的 Listbox 或 Tree 彈出內容支援首字元快速定位

    不可編輯的 Combobox 在焦點位於 Listbox 或 Tree 型彈出內容時，輸入可列印字元，焦點會移至名稱以該字元開頭的下一個建議值。Grid 型彈出內容不適用此行為。

  • 鍵盤操作

    Combobox 可用 Escape 鍵關閉彈出內容

    彈出內容可見時，按下 Escape 鍵會關閉彈出內容，且不會意外改變 Combobox 的值。彈出內容已隱藏時再按 Escape 鍵，須依該元件設計文件的定義，一律保留或一律清除 Combobox 的值。

  • 焦點管理

    Escape 鍵關閉 Listbox、Grid 或 Tree 型彈出內容並將焦點移回 Combobox

    焦點位於 Listbox、Grid 或 Tree 型彈出內容時，按下 Escape 鍵會關閉彈出內容，並將焦點移回 Combobox。

  • 鍵盤操作

    Listbox 型彈出內容以上下鍵移動焦點並同步選取

    焦點位於 Listbox 型彈出內容時，按向下鍵會將焦點移至下一個選項並同時選取該選項，按向上鍵會將焦點移至上一個選項並同時選取。焦點已位於最後一個（或第一個）選項時再按該方向鍵，須為「將焦點移回 Combobox」或「不做任何動作」兩者之一，且行為前後一致。

  • 鍵盤操作

    Listbox 型彈出內容的左右鍵將焦點移回 Combobox 並移動文字游標

    可編輯的 Combobox 在焦點位於 Listbox 型彈出內容時，按向左鍵或向右鍵，焦點會移回 Combobox 且彈出內容不關閉，同時文字游標往左或往右移動一個字元；游標已位於最左端或最右端時則不再移動。

  • 鍵盤操作選做

    Listbox 型彈出內容的 Home 與 End 鍵移至首末選項或移動文字游標

    焦點位於 Listbox 型彈出內容時，按 Home 鍵會將焦點移至並選取第一個選項，按 End 鍵會將焦點移至最後一個選項；若 Combobox 可編輯，亦可改為將焦點移回 Combobox，並把文字游標置於第一個字元前或最後一個字元後。實作須擇一並保持一致。

  • 鍵盤操作選做

    Listbox 型彈出內容的 Backspace 與 Delete 鍵可編輯 Combobox

    可編輯的 Combobox 在焦點位於 Listbox 型彈出內容時，按 Backspace 鍵會將焦點移回 Combobox 並刪除游標前一個字元；按 Delete 鍵會將焦點移回 Combobox，若已有建議值被選取則移除其選取狀態，並移除行內自動完成字串（若存在）。

  • 鍵盤操作

    Grid 型彈出內容以方向鍵逐格移動焦點

    焦點位於 Grid 型彈出內容時，向左鍵與向右鍵逐格水平移動，向上鍵與向下鍵逐格垂直移動；可選擇性支援在列首或列尾換至上一列或下一列。

  • 鍵盤操作選做

    Grid 型彈出內容的 Page、Home、End 與 Control 組合鍵運作正確

    焦點位於 Grid 型彈出內容時：Page Up 與 Page Down 鍵依作者設定的列數上下移動焦點，焦點已在首列或末列時不再移動；Home 與 End 鍵將焦點移至焦點所在列的第一個或最後一個儲存格；Control+Home 與 Control+End 鍵分別將焦點移至第一列與最後一列。

  • 鍵盤操作選做

    Grid 型彈出內容的 Backspace 與 Delete 鍵可編輯 Combobox

    可編輯的 Combobox 在焦點位於 Grid 型彈出內容時，按 Backspace 鍵會將焦點移回 Combobox 並刪除游標前一個字元；按 Delete 鍵會將焦點移回 Combobox，若已有建議值被選取則移除其選取狀態，並移除行內自動完成字串（若存在）。

  • 鍵盤操作

    垂直排列的 Tree 型彈出內容以方向鍵導覽並展開收合節點

    焦點位於垂直排列的 Tree 型彈出內容時：向右鍵在已收合節點上會展開該節點，且焦點與選取皆不移動，在已展開節點上會移至第一個子節點，在末端節點上不做任何動作；向左鍵在已展開節點上會收合該節點，在末端或已收合的子節點上會移至其父節點，在末端或已收合的根節點上不做任何動作；向下鍵與向上鍵會在不改變任何節點展開狀態的前提下，移至下一個或上一個可聚焦節點。上述焦點移動時，若目的節點為可選取的建議值，該節點同時被選取。

  • 鍵盤操作

    Tree 型彈出內容以 Home 與 End 鍵移至首末節點

    焦點位於 Tree 型彈出內容時，按 Home 鍵會將焦點移至第一個可聚焦節點，按 End 鍵會移至最後一個可聚焦節點，且皆不改變任何節點的展開或收合狀態；若目的節點為可選取的建議值，該節點同時被選取。

  • 鍵盤操作

    水平排列的 Tree 型彈出內容互換方向鍵行為

    Tree 型彈出內容設定 aria-orientation="horizontal" 時，向下鍵與向右鍵的行為互換，向上鍵與向左鍵的行為互換。

  • 焦點管理

    Combobox 以 aria-activedescendant 管理彈出內容中的焦點

    Combobox 取得焦點時，DOM 焦點置於 Combobox 元素上。當焦點位於 Listbox、Grid 或 Tree 型彈出內容的子元素時，DOM 焦點仍維持在 Combobox，並由 Combobox 的 aria-activedescendant 指向彈出內容中目前作用中的子元素。對話框型彈出內容不適用，其 DOM 焦點會實際移入對話框。

  • 鍵盤操作選做

    相鄰的開啟按鈕可顯示 Combobox 的彈出內容

    Combobox 旁若設有圖像化的開啟按鈕（Open button），啟用該按鈕時，在有可用建議值的情況下會顯示彈出內容。