Listbox

Demo 與 Accessibility Tree

出貨方式

Accessibility Tree

觀察對象：外層的清單容器。

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

Accessibility Tree

觀察對象：第一個選項群組。

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

Accessibility Tree

觀察對象：目前選取的選項。

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

鍵盤操作

按鍵	行為
`Tab`	移入與移出整個清單。清單只佔一個停留點 —— 選項本身不可聚焦，焦點停在容器上。
`↓ / ↑`	移到下一個或上一個選項。單選清單讓選取跟著焦點移動，所以移到哪就選到哪。停在頭尾不繞回去，避免使用者誤以為清單還有下一頁。
`Home / End`	跳到第一個或最後一個選項。

ARIA 屬性

屬性	值	用途
`role`	`listbox`	持有所有選項的容器。它和原生 <select> 解決同一個問題；只有在需要自訂選項外觀或分群呈現時才值得自己實作。
`aria-labelledby`	`可見標題的 id`	獨立的 listbox 必須有自己的名稱。有可見標題時指向它，看得到的字和聽得到的字才是同一份。
`aria-activedescendant`	`作用中選項的 id`	焦點留在容器上，由這個屬性指出容器內目前作用中的是哪個選項。這是 roving tabindex 之外的另一條路：選項不需要是可聚焦元素，移動時也不必呼叫 focus()。代價是作用中的樣式得自己畫。
`role（選項）`	`option`	每個選項的角色，且必須直接位於 listbox 或其內的 group 之下。中間多包一層沒有角色的 div，選項與清單的關聯就斷了。
`aria-selected`	`true / false`	選取狀態。同一個清單只能擇一使用 aria-selected 或 aria-checked，不要混用 —— 兩者在輔助科技裡會唸成不同的事情。未選取時明寫 false，使用者才聽得出「這一項沒有被選」。
`role（群組）`	`group`	選項分群用的容器，每個群組至少要有一個選項。群組標題是靜態文字，不給 role=option，方向鍵才不會停在上面。
`aria-labelledby（群組）`	`群組標題的 id`	群組必須有名稱。少了它，螢幕閱讀器只唸得出「群組」兩個字，使用者聽不出這幾個選項為什麼被歸在一起。

WCAG 對應

等級 A1.3.1 資訊及關聯性
選項與清單、選項與群組的隸屬關係以 role 表達，程式判斷得出來，不只靠縮排與間距。
等級 A2.1.1 鍵盤
方向鍵、Home、End 即可完成選取，不需要滑鼠。
等級 A2.4.3 焦點順序
整個清單只佔一個 Tab 停留點，選項之間的移動交給方向鍵，Tab 不會被四個選項一路攔下來。
等級 AA2.4.7 焦點可見
作用中的選項有橘色外框，與選取狀態的淺綠底色明顯不同 —— 使用者分得出「焦點在這裡」和「這一項被選了」。
等級 A4.1.2 名稱、角色、值
清單、群組、選項各有正確的角色與名稱，選取狀態以 aria-selected 表達。

APG 規則

頁面結構
Listbox 的容器元素須具備 listbox 的角色語意
包含或擁有所有選項的元素須具備 role=listbox。
頁面結構
Listbox 的每個選項須具備 option 角色語意並正確隸屬於 Listbox
選項具有 role=option，並位於 role=listbox 或其內部 role=group。
頁面結構
Listbox 內的選項群組至少須包含一個選項
若 Listbox 使用 role=group，每個群組至少包含一個 role=option。
元件語意
Listbox 內的選項群組須具備無障礙名稱
Listbox 中的每個 group 須透過 aria-label 或 aria-labelledby 提供無障礙名稱。
元件語意
獨立的 Listbox 須具備無障礙名稱
不屬於其他元件的獨立 Listbox，須透過 aria-labelledby 或 aria-label 提供無障礙名稱。
元件語意
Listbox 的選項須以一致的方式標示選取狀態
可選取的選項須一致使用 aria-selected 或 aria-checked 其中一種，選取時設為 true，未選取時設為 false。只有在兩者語意不同、介面清楚呈現各自意義，且各有獨立控制方法的極少數情況下，才同時使用兩種狀態。
焦點管理
單選 Listbox 獲得焦點時，應聚焦已選取的選項；若無選取則聚焦第一個
當單選 Listbox 獲得焦點時，焦點移至第一個已選取的選項，若無已選取項目則移至第一個選項。
焦點管理
多選 Listbox 獲得焦點時不應自動改變現有的選取狀態
當多選 Listbox 獲得焦點時，焦點移至第一個已選取的選項，若無已選取項目則移至第一個選項，且不自動改變選取狀態。
鍵盤操作
Listbox 支援向下鍵和向上鍵移動選項
按下方向鍵將焦點移至下一個選項，按上方向鍵移至上一個選項。
鍵盤操作選做
Listbox 支援 Home 鍵和 End 鍵移至第一個或最後一個選項
Home 鍵將焦點移至第一個選項，End 鍵將焦點移至最後一個選項。
鍵盤操作選做
單選 Listbox 採焦點即選取模式時，移動焦點即同步選取
若單選 Listbox 採用「選取跟隨焦點」模式，使用方向鍵、Home 或 End 移動焦點時，會自動取消前一個選取項目並選取焦點所在的新選項。
鍵盤操作選做
Listbox 支援輸入字元快速跳至對應選項
快速輸入一個或多個字元時，焦點會跳至下一個名稱以輸入字串開頭的選項。
鍵盤操作
多選 Listbox 可用 Space 鍵切換焦點項目的選取狀態
在 APG 無修飾鍵的多選模式中，按 Space 鍵可切換焦點選項的選取狀態，且不清除其他已選取的項目。
鍵盤操作選做
Shift+方向鍵的行為須符合所採用的多選模式
無論有無搭配修飾鍵，在多選模式中，Shift + 上下方向鍵，則移動焦點並切換相鄰選項的選取狀態。
鍵盤操作選做
多選 Listbox 支援以 Shift + Space 鍵等快捷鍵選取連續範圍
Shift + Space 鍵選取從錨點到目前焦點的連續範圍；Control + Shift + Home 或 Control + Shift + End 分別選取到第一個或最後一個選項的連續範圍。
鍵盤操作選做
多選 Listbox 支援 Control+A 選取所有選項
按 Control + A 可全選所有選項。
鍵盤操作
修飾鍵多選模式中，無修飾鍵的導覽操作只保留當前焦點項目的選取
若使用修飾鍵多選模式，在未按 Shift 或 Control 的情況下移動焦點，會取消所有其他選取項目，只保留焦點所在的選項為選取狀態。
鍵盤操作
修飾鍵多選模式中，Control+方向鍵可移動焦點但不改變選取
若使用修飾鍵多選模式，Control + 下方向鍵與 Control + 上方向鍵只移動焦點，不改變選取狀態。
鍵盤操作
修飾鍵多選模式中，Control+空白鍵可切換焦點項目的選取狀態
若使用修飾鍵多選模式，Control + Space 鍵只切換焦點選項的選取狀態，不影響其他選項。
頁面結構
Listbox 的選項內不應包含需獨立操作的互動元件
選項內不應包含連結、按鈕或 Checkbox 等可獨立互動的元素。若項目需要包含可互動的子元素，應改用 Grid Pattern 而非 Listbox Pattern。
頁面結構選做
Listbox 的選項名稱應精簡且便於區分
選項名稱應避免過長或不必要的重複前綴，讓螢幕閱讀器與鍵盤使用者能有效率地區分與導覽各選項。
鍵盤操作
水平排列的 Listbox 使用向左和向右鍵進行導覽
在水平 Listbox 中，右方向鍵的功能等同垂直 Listbox 的下方向鍵，左方向鍵的功能等同垂直 Listbox 的上方向鍵。