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

達成基準の原文

ユーザーインターフェースコンポーネントの名前および役割をプログラムによって決定可能にし、ユーザーが設定できる状態・プロパティ・値をプログラムによって設定可能で、また通知されること。

要件の解説（3つの要素）

要素	説明
名前	ボタンや入力欄などに与えられるラベル（aria-label, <label>, テキスト）
役割	要素の機能的な意味・種類（例：button, checkbox, tab, etc.）
値	状態や入力値、選択肢の現在値（例：チェック済み、選択中、入力された値など）

対象となる UI コンポーネントの例

• ボタン（<button>）
• チェックボックス（<input type=”checkbox”>）
• フォーム入力欄（<input>, <textarea>）
• ナビゲーションタブやアコーディオン（<details>, カスタムUI）
• スライダー、カレンダーなど JavaScript製のカスタムUI

実装例と正しいマークアップ

例1：明示的なラベルがあるボタン

<button type="submit">送信</button>

• 名前：送信
• 役割：button
• 値：N/A（状態なし）

例2：aria属性を使ったカスタムボタン

<div role="button" aria-label="メニューを開く" tabindex="0"></div>

• 名前：メニューを開く
• 役割：button（roleで定義）
• 値：N/A

例3：選択状態を伝えるトグルボタン

<button aria-pressed="true">お気に入り</button>

• 名前：お気に入り
• 役割：button
• 値：pressed = true（押下状態）

なぜ重要か（支援技術との連携）

ポイント	説明
スクリーンリーダー	利用者に「これはボタン」「現在はONです」などの情報を正しく読み上げるため
キーボード操作	ARIAで定義された役割・値により、UIの制御や状態変化が分かりやすくなる
状態の更新通知	値の変更が即時通知されないと、支援技術ユーザーが状況変化に気付けないリスクがある

実装チェックリスト

チェック項目	対応方法の例
名前（label）が明示的にあるか	<label>、aria-label など
役割が正しくマークアップされているか	ネイティブ要素 or role 属性
値や状態が変化したらプログラム的に伝達されているか	aria-checked, aria-pressedなど
カスタムUIでARIAを正しく使っているか（role・stateの定義）	role="tab", aria-selected="true"

利点と効果

観点	効果
アクセシビリティ	視覚・聴覚・操作に制限のあるユーザーにもUIの構造と状態が伝わる
SEO効果	意味ある構造は検索エンジンにも理解されやすくなる（特にフォーム構造など）
ユーザビリティ	状態や意味が明確なUIは、一般ユーザーにも直感的で使いやすくなる

まとめ

項目	内容
達成基準名	4.1.2 名前・役割・値（Level A）
主な目的	支援技術がUIの構造・意味・状態を正確に理解し操作できるようにするため
主な対策	ARIA属性の適切な使用、ラベル・role・値の明示
対象	全てのUI要素（特にJavaScript製のカスタムUI）

一覧に戻る