アクセシビリティ資料 検査項目事例集 WCAG 4.1.2

WCAG 4.1.2: 名前 (name)・役割 (role)・値 (value)

ネイティブHTMLの標準コントロールを優先して使用し、独自に作成したカスタムコンポーネントでは、名前(accessible name)、役割(role)、状態(aria-expanded, aria-checked等)、値が支援技術に正しく伝わり、操作に応じて動的に更新されるようにします。

Level A 確認方法: 自動検査

意図的な失敗例: 名前・役割・値が不明

カスタム部品に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

生成メモ

  • 支援技術を用いた実検証が必要