WCAG 4.1.2: 名前 (name)・役割 (role)・値 (value)
ネイティブHTMLの標準コントロールを優先して使用し、独自に作成したカスタムコンポーネントでは、名前(accessible name)、役割(role)、状態(aria-expanded, aria-checked等)、値が支援技術に正しく伝わり、操作に応じて動的に更新されるようにします。
意図的な失敗例: 名前・役割・値が不明
カスタム部品にroleや状態がありません。
確認観点
- div や span で作成された独自ボタン、タブ、アコーディオン、ダイアログを特定する
- 適切な WAI-ARIA ロール(role="button", role="tab" 等)とアクセシブルな名前を付与する
- 開閉状態や選択状態の変化に応じて、aria-expanded や aria-selected の値をJavaScriptで正しく更新する
人の判断が必要な例
- スクリーンリーダーで操作した際、要素の種類(ボタン、タブ等)と現在の状態が正しくアナウンスされるか確認する
補助ツール候補
- 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
生成メモ
- 支援技術を用いた実検証が必要