WCAG 2.2の達成基準2.5.3「ラベルを含む名前（name）」は、ボタンや入力欄に表示されたラベルの文言を、その要素のアクセシブルな名前にも含めることを求めています。
適合レベルはAです。
画面に「送信」と表示されているのに、プログラムが認識する名前が「フォームを確定」だけでは、音声入力を使う人が画面上の文言を発話しても操作できないおそれがあります。
実装では、表示とプログラム上の名前を別々に考えず、同じ文言から組み立てることが基本です。
達成基準2.5.3が求めること
対象は、テキストまたは文字画像を含む可視ラベルがあるユーザーインターフェース部品です。
ボタン、リンク、入力欄などのアクセシブルな名前に、画面へ表示したラベルのテキスト全体を含めます。
- 可視ラベル：利用者が画面上で確認でき、部品を識別するための文言です。HTMLの
<label>要素だけを指す言葉ではありません。 - アクセシブルな名前：ソフトウェアや支援技術が、その部品を利用者に識別させるために使う名前です。HTMLの
name属性とは別の概念です。詳しい実装は、関連記事のWCAG 4.1.2「名前、役割、値」とHTML、ARIAの実装方法でも解説しています。 - 含まれている状態：可視ラベルが「検索」なら、アクセシブルな名前が「検索」または「検索 サイト内」のようになっている状態です。ラベルの文言を名前の先頭に置くと、対応関係がさらに分かりやすくなります。
| 画面上のラベル | アクセシブルな名前 | 判定 |
|---|---|---|
| 検索 | 検索 | ラベルと名前が一致する |
| 検索 | 検索 サイト内 | ラベルが名前の先頭に含まれる |
| 検索 | キーワードを探す | 「検索」が含まれないため不一致になる |
音声入力で不一致が問題になる理由
この達成基準が主に支えるのは、画面を見ながら音声で操作する利用者です。
たとえば「送信をクリック」と発話したとき、音声認識ソフトウェアは操作対象のアクセシブルな名前を手掛かりにします。
画面の「送信」とアクセシブルな名前が一致していれば、見えている文言をそのまま操作コマンドに使えます。
名前が「フォームを確定」だけなら、利用者は画面にない言葉を推測しなければなりません。
表示された文言と読み上げられる名前がそろうため、画面を見ながらスクリーンリーダーを使う人の理解にも役立ちます。
音声入力や代替入力に対応するUI設計では、マウス以外の操作方法を含めて確認できます。
実装の基本
ボタン内のテキストを名前に使う
標準のHTML要素は、表示テキストからアクセシブルな名前を計算できることがあります。
単純なボタンでは、不要なARIA属性を足さない実装が明快です。
<button type="submit">送信</button>このボタンは、画面上のラベルもアクセシブルな名前も「送信」になります。
入力欄とlabel要素を関連付ける
フォームでは、for属性とid属性を対応させます。
この関連付けにより、可視ラベルの「メールアドレス」が入力欄のアクセシブルな名前になります。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">この例に同じ文言のaria-labelを重ねる必要はありません。
aria-labelは既存のラベルから計算される名前を上書きするため、文言を変更した際の不一致を生みやすくなります。
名前に補足を加える場合
部品を識別するために追加の文脈が必要なら、可視ラベルをアクセシブルな名前の先頭に残します。
ただし、表示テキストだけで目的が分かる場合は、名前を長くする必要はありません。
<button type="button" aria-label="検索 サイト内">検索</button>可視ラベルの「検索」が名前の先頭にあるため、音声入力でも画面上の文言を手掛かりにできます。
画像やアイコンを使う場合
アイコンと可視テキストを同じボタンに置くなら、装飾目的の画像には空のalt属性を設定し、ボタンのテキストを名前として使えます。
<button type="submit">
<img src="send-icon.png" alt="">
送信
</button>アイコンだけで可視テキストがないボタンには、達成基準2.5.3は適用されません。
ただし、部品を識別できるアクセシブルな名前は別の達成基準でも必要になるため、目的に合うaria-labelや同等の方法を用意します。
<button type="submit" aria-label="送信">
<img src="send-icon.png" alt="">
</button>よくある失敗と修正方法
label要素の文言をaria-labelで上書きしている
次の入力欄は、画面に「ユーザー名」と表示されますが、アクセシブルな名前はaria-labelの「入力してください」になります。
<label for="username">ユーザー名</label>
<input type="text" id="username" aria-label="入力してください">aria-labelを削除し、<label>との関連付けをそのまま使えば、表示と名前が一致します。
<label for="username">ユーザー名</label>
<input type="text" id="username">見た目の文言と別の名前を付けている
次のボタンでは、画面上の「送信」がアクセシブルな名前に含まれません。
<button type="submit" aria-label="フォームを確定">送信</button>補足が不要ならaria-labelを削除します。
補足が必要なら、「送信 フォーム」のように可視ラベルを先頭に残します。
画像の代替テキストとボタン名を重複させている
画像のaltとボタンのaria-labelへ同じ文言を重ねると、実装によっては名前の計算や読み上げが分かりにくくなります。
可視テキストがある場合はそのテキストを使い、装飾アイコンのaltは空にするなど、名前の出どころを一つに絞ります。
確認手順
- ボタン、リンク、入力欄の近くにある可視ラベルを特定します。
- ブラウザの開発者ツールにあるアクセシビリティ情報などで、各部品の計算済みの名前を確認します。
- 可視ラベルの文言全体が、同じ順序でアクセシブルな名前に含まれているかを照合します。
- 可能であれば音声操作で可視ラベルを発話し、意図した部品を選択または実行できるかを確かめます。
- スクリーンリーダーでも、表示と読み上げの対応が理解しやすいかを確認します。
axeやWAVEなどの自動テストツールは、名前の欠落や一部の問題を見つける補助になります。
しかし、どの文字列が利用者にとって可視ラベルなのか、発話した文言で正しい部品を操作できるかは、画面を見ながら手動でも確認します。
実装前後のチェックリスト
- 可視ラベルのある部品に、ラベルの全文を含むアクセシブルな名前がある
- 可視ラベルを名前の先頭に置いている
- 標準HTMLで名前を付けられる部品に、不要な
aria-labelを追加していない - ラベルを変更したとき、ARIA属性や参照先の文言も含めて再確認している
- アイコンの代替テキストと部品の名前が重複していない
- 自動テストだけでなく、計算済みの名前と実際の操作も確認している
まとめ
達成基準2.5.3では、可視ラベルとアクセシブルな名前を完全に別の文言へ分けないことが要点です。
可視ラベルの全文を名前に含め、できれば先頭に置きます。
まず標準HTMLから得られる名前を使い、追加の説明が必要な場合だけARIA属性を慎重に加えると、不一致を防ぎやすくなります。
実装後は、画面上のラベル、計算済みの名前、音声による操作の三つを照合してください。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。