2.5.3 ラベルを含む名前 (name)

要件

ユーザーインタフェース コンポーネントのアクセシブル・ネーム（name 属性や aria-label など）が、視覚的なラベル（表示されている文字列）を含んでいること。

なぜ必要か？

音声入力ユーザーは、画面上のボタンやリンクを 視覚的に見えているラベルで操作を試みます。
たとえば見た目に「送信」と書かれているボタンが、aria-label=”Submit” だと、

• 音声コマンドで「送信をクリック」と言っても認識されない
• 実際のラベルとアクセシブルネームの不一致により、操作不能になる

NGの例

<!-- ボタンに見た目のラベルはあるが、name に含まれていない -->
<button aria-label="Submit the form">送信</button>

見た目は「送信」だが、音声で「送信をクリック」と言っても認識されない

OKの例

<!-- アクセシブルネームに見た目のラベル「送信」が含まれている -->
<button aria-label="送信 - フォームを提出する">送信</button>

視覚と音声入力の両方で「送信」という語が一致するため、操作可能。
または、以下のように明示的な <label> を使う場合も対応可能。

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" />

実装のポイント

項目	説明
アクセシブルネーム（aria-label, alt, title, labelなど）に	見た目のテキスト（視覚ラベル）を含める
スクリーンリーダーや音声入力で操作することを想定する	視覚と非視覚で同じコマンドが通じるように
特にボタン、リンク、フォーム部品、アイコンに注意	アイコンボタンはラベル必須

チェックリスト

• 視覚的ラベルが存在するか？
• アクセシブル・ネームにそのラベル文言が含まれているか？
• 音声操作でも同じ文言でターゲットが選択できるか？
• 特殊な表現・装飾のみのボタンには aria-label があるか？

利点

• 音声入力ユーザーが確実に操作可能になる
• 音声アシスタントやスクリーンリーダーでも一貫性ある操作が可能
• UIの見た目と動作の整合性が高まり、ユーザビリティが向上

まとめ

項目	内容
達成基準	2.5.3 ラベルを含む名前
等級	A
目的	視覚ラベルとプログラム上の名前を一致させることで音声入力等での操作性を確保する
対象	ボタン・リンク・入力フォーム・アイコンなどのインタラクティブ要素
ポイント	aria-label, label, alt などの値に視覚テキストを含めることが重要

一覧に戻る