WCAG 4.1.2: 名前・役割・値がプログラム的に取得可能か確認する
標準HTMLコントロールを優先し、カスタムコンポーネントでは名前・役割・状態・値が支援技術に正しく伝わり、状態変化後も更新されるか確認します。
意図的な失敗例: 名前・役割・値が不明
カスタム部品にroleや状態がありません。
確認観点
- 可能な限りbutton、a、input、selectなど標準HTMLコントロールで実装されているか確認する
- カスタムコントロールに適切なroleがあり、不要なroleや誤ったroleが使われていないか確認する
- 操作要素にアクセシブルな名前があり、表示ラベルや目的と一致しているか確認する
- カスタムコントロールがキーボードで操作でき、フォーカス状態と支援技術上の状態が一致するか確認する
人の判断が必要な例
- ブラウザのアクセシビリティツリーで名前・役割・値が意図どおり取得できるか確認する
- スクリーンリーダーで操作要素の名前、役割、状態変化が理解できるか確認する
- 動的UIでは初期表示だけでなく、開閉・選択・入力後の状態も確認する
補助ツール候補
- aria-attributes
- role-check
- button-name
- input-button-name
- select-name
- link-name
- aria-allowed-attr
- aria-required-attr
- aria-roles
- aria-toggle-field-name
生成メモ
- 支援技術を用いた実検証が必要