APG パターン
コンボボックスパターン
コンボボックスは、テキスト入力とポップアップリストを組み合わせたウィジェットです。入力内容に基づいて候補をフィルタリングし、選択できます。
キーボード操作
| キー | 動作 |
|---|---|
| ↓（下矢印） | リストボックスを開く（閉じている場合）。次の選択肢にフォーカスを移動 |
| ↑（上矢印） | 前の選択肢にフォーカスを移動 |
| Enter | 現在フォーカスされた選択肢を確定し、リストボックスを閉じる |
| Escape | リストボックスを閉じる |
| 文字入力 | 入力値でリストをフィルタリング |
必要な ARIA
コンボボックスコンテナ
role="combobox"要素がコンボボックスであることを示すaria-expandedリストボックスの開閉状態（true/false）aria-haspopup="listbox"リストボックスポップアップを持つことを示すaria-ownsリストボックス要素のID（DOMが離れている場合）入力フィールド
aria-autocomplete="list"入力に基づいてリストが表示されることを示すaria-controls制御するリストボックスのIDaria-activedescendant現在アクティブなオプションのIDリストボックス
role="listbox"選択肢のリストであることを示すaria-labelリストボックスのアクセシブルな名前各オプション
role="option"リストボックスの各選択肢であることを示すaria-selected現在ハイライトされているかどうかライブデモ
入力フィールドに文字を入力してフィルタリングし、↑↓で候補を移動、Enterで選択してください。
aria-activedescendant の仕組み
コンボボックスでは、DOMフォーカスは常にテキスト入力に留まります。aria-activedescendantを使って、論理的にフォーカスされているオプションをスクリーンリーダーに伝えます。
<!-- フォーカスはinputに保持 -->
<input role="combobox"
aria-activedescendant="opt-2"
aria-controls="listbox-1">
<!-- 論理的なフォーカスはoption-2 -->
<ul role="listbox" id="listbox-1">
<li role="option" id="opt-1">東京都</li>
<li role="option" id="opt-2"
aria-selected="true">大阪府</li>
<li role="option" id="opt-3">京都府</li>
</ul>よくある間違い
- role="combobox"を入力フィールドに設定していない
- aria-activedescendantで現在のハイライト位置を通知していない
- 矢印キーによる選択肢の移動が実装されていない
- Enterキーによる選択確定が動作しない
- リストボックスにrole="listbox"、選択肢にrole="option"を設定していない
- 入力フィルタリング時にリストの内容更新がスクリーンリーダーに通知されない
コンボボックスはARIAパターンの中でも最も複雑なものの一つです。 可能であれば、HTMLの
<datalist>を検討し、カスタム実装が必要な場合のみこのパターンを使用しましょう。