Accessibility Studio / UI Pattern(実装パターン)

コンボボックス

コンボボックスを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

DAS-PATTERN-COMBOBOXv1.0.0監査画面で確認

Direct answer

何を確認する項目ですか?

コンボボックスを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

combobox role | popup relation | active descendant | keyboard behaviorが必須構造です。roleやaria属性だけで完了とせず、keyboard、focus移動、終了後の復帰、mobile、Reduced Motionを一連の操作で確認します。

Reference facts

固定値・必要な証拠・判定境界

Pattern ID(固定ID)
DAS-PATTERN-COMBOBOX
Required(必須構造)
combobox role | popup relation | active descendant | keyboard behavior
Runtime support(実装範囲)
manual
Keyboard(操作確認)
Tab、Shift+Tab、Enter、Space、矢印、Home、End、Escapeのうち該当操作を確認
Focus lifecycle(フォーカス)
開始位置、移動、閉じ込めの必要性、終了後の戻り先を実機で確認
Motion and mobile(動き・端末)
Reduced Motion、200%文字拡大、320 CSS px相当、touchとkeyboardを確認

Implementation QA

構造・keyboard・focusを一つの操作として確認

  1. 必須HTML、role、state、propertyの所有関係を確認します。
  2. TabとShift+Tabで入退場し、pattern固有の矢印・Home・End・Escapeを確認します。
  3. 開始時のfocus、内部移動、閉じ込めが必要な範囲、閉じた後の復帰先を確認します。
  4. 200%文字拡大、320 CSS px相当、touch、Reduced Motionで情報と操作を維持します。
  5. WordPress、React、Vueなど実際のruntimeで再確認し、未確認環境を明記します。

Human review boundary

このページだけでは決められないこと

  • 自動検査結果だけでWCAG適合、認証、法的要件の充足を宣言しません。
  • 意味、文章品質、操作の分かりやすさ、支援技術固有の挙動は人が確認します。
  • 代表ページと状態、複数browser・端末、keyboard、screen reader、zoom・reflowを評価範囲へ含めます。
  • 未実施環境と確認できなかった項目をreportに残し、0 Findingを「問題なし」と言い換えません。

Primary source

公式仕様・解説

W3C/WAIの該当ページで原文と例外を確認する