Level AWCAG 2.2
4.1.2 名前・役割・値
すべてのUIコンポーネントの名前・役割がプログラムで解釈可能で、状態変化が通知される。
なぜ重要か
スクリーンリーダー
UIコンポーネントの名前・役割・状態が正しく伝わらないと、操作方法も意味も理解できません。
キーボードユーザー
カスタムウィジェットにroleとキーボードサポートがないと、操作自体が不可能になります。
支援技術の互換性
音声認識ソフトはアクセシブルネームでUI要素を指定。名前がないと操作指示ができません。
カスタムコンポーネント
div/spanで独自UIを作る場合、WAI-ARIAで名前・役割・値を明示する必要があります。
ライブデモ
カスタムチェックボックス
操作してみてください
利用規約に同意する
キーボードで操作できません。Tab で移動してみてください。
アクセシビリティツリー表示
generic
├─ generic (div)
│ └─ "✓" (テキストのみ)
└─ "利用規約に同意する"
role なし、state なし、name なし
ペルソナで理解する
山田さん（42歳）— 全盲・スクリーンリーダー使用
ECサイトでカスタムチェックボックスに出会うと、スクリーンリーダーは何も読み上げません。クリック可能なdivとしか認識されず、チェック状態もわかりません。「同意する」のチェックが必要だと気づかず、フォーム送信が何度も失敗しました。