Combobox: アクセシビリティ契約
WAI-ARIA Authoring Practicesに準拠したコンボボックスパターンのキーボード操作、フォーカス、フィルタリング、選択、およびアナウンス動作を定義します。デフォルトでWCAG準拠を主張するものではありません。
パッケージステータス: AI支援リファレンスパッケージ。静的パッケージ検証は合格済み。実装シナリオは未実行であり、安定採用前に人間によるドメインレビューが必要です。
決定事項
WAI-ARIA Authoring Practicesのコンボボックスパターンに従って、編集可能または読み取り専用の入力と連携したリストボックスのポップアップ、アクティブディセンダント管理、および予測可能なキーボード動作を実装します。このブロックはエンジニアリングおよびQA向けのインタラクション契約を規定し、特定の実装に対するWCAG準拠を認証するものではありません。
範囲
- ロール、ラベリング、ポップアップの表示、アクティブオプション管理
keyboard-contract.yamlに記載されたキーボードバインディング- フィルタリング、非同期読み込み、選択確定、閉じる動作
- オープン、フィルタ結果、選択変更のアナウンス
このブロックの対象外
- ビジュアルデザイントークンおよびスタイリング
- WCAG準拠監査や法的アクセシビリティ承認
- サーバーサイドの検索関連度ランキング
契約内容
- 入力はrole="combobox"を持ち、アクセシブル名、aria-expanded、および開いている場合はリストボックスポップアップを参照するaria-controlsを公開する。
- ポップアップが開くと、aria-activedescendantでアクティブオプションを示し、DOMフォーカスは常にコンボボックス入力に留まる。
- EscapeおよびTabキーはポップアップを閉じ、aria-activedescendantをクリアし、プロファイルルールに従って入力値を復元する。
- 矢印キーはアクティブディセンダントを移動し、Enterキーはアクティブオプションを選択してポップアップを閉じる。
- Tabキーはポップアップを閉じ、aria-activedescendantをクリアし、ポップアップ内にフォーカストラップを設けず標準のドキュメントタブ順に従う。
- 入力時はautocompleteがlistまたはbothの場合にオプションをフィルタリングし、非同期ソースの場合はプロファイルのタイミングに従いデバウンスする。
- 選択は入力値を更新し、選択された値を名前で示す簡潔なアナウンスを一度だけ発行する。読み込み中および空状態は、キー入力ごとにスパムにならないようにアナウンスされる。
実装ガイダンス
- 編集可能なコンボボックスとリストボックスポップアップのためにWAI-ARIA APGコンボボックスパターンに従う。
keyboard-contract.yamlのバインディングを自動化されたキーボードテストで実装する。- 結果数と選択確認にはpoliteなライブリージョンを使用する。
- キーボードのみのナビゲーションと対象ブラウザで少なくとも1つのスクリーンリーダーでテストする。
障害処理と安全策
- 非同期フェッチ失敗時はコンボボックスにフォーカスを保持し、リトライ可能なエラーをアナウンスする。
- 結果がゼロの場合は空状態をアナウンスし、修正のために入力済みテキストを保持する。
- 契約とテストを更新せずにコンボボックスを非標準ウィジェットに変換しない。
検証と運用
keyboard-contract.yamlの各キーボードバインディングコンテキストで自動テストを実行する。- 安定版マーク前に手動の支援技術レビューを行う。
- フォーカス喪失、二重アナウンス、フォーカストラップに関するバグ報告を追跡する。
このパッケージの実行可能に見える例はフィクスチャおよび受け入れ契約です。採用前にパッケージ構造を検証し、対象リポジトリでシナリオを実装・実行してください。
採用前提
example.yamlのデバウンス、リストサイズ、ラベルテキストは国選択用のプロファイル選択であり、普遍的なデフォルトではありません。- マルチセレクトコンボボックスは後で採用する場合、別途契約拡張が必要です。