WCAG 2.2 ガイドライン「2.5.3 ラベルと名前の一致」Level A について
はじめに
WCAG 2.2の「2.5.3 ラベルと名前の一致」は、ユーザーインターフェースのコンポーネントに視覚的なラベルが含まれる場合、そのラベルがアクセシブルな名前にも含まれていることを保証することを目的としています。この基準は、特にスクリーンリーダーユーザーが、視覚的に表示されているラベルと一致する情報を得られるようにするために重要です。
1. 基準の概要
要件
- ボタンや入力フィールドなどのユーザーインターフェース要素において、視覚的なラベルとアクセシブルな名前（プログラム的に指定された名前）が一致している必要があります。
- 一致には、視覚的なラベルがアクセシブルな名前の一部として含まれていることが含まれます。
2. 実装方法
a. 視覚的なラベルとアクセシブルな名前を一致させる
例: 視覚的なラベルをそのままアクセシブルな名前として使用
HTML
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" aria-label="ユーザー名">
- 視覚的なラベル「ユーザー名」が、
aria-label属性を通じてスクリーンリーダーユーザーにも伝わります。
b. ボタンのアクセシブルな名前をラベルと一致させる
例: ボタンのテキストをそのままアクセシブルな名前にする
HTML
<button>送信</button>
- ボタンの視覚的なテキスト「送信」が、デフォルトでアクセシブルな名前になります。
c. 画像を使用したラベルの場合
画像をラベルとして使用する場合は、alt属性またはaria-labelを使って名前を指定します。
例: 画像を使用したラベル
HTML
<button aria-label="送信">
<img src="send-icon.png" alt="送信">
</button>
- 画像の
alt属性またはaria-label属性に「送信」を指定して、スクリーンリーダーでも正確に伝えます。
d. カスタムラベルの場合
カスタムラベルを使用する場合は、aria-labelledbyでラベルと要素を関連付けます。
例: カスタムラベル
HTML
<label id="customLabel">メールアドレス</label>
<input type="email" id="email" aria-labelledby="customLabel">
aria-labelledby属性を使用して、ラベル「メールアドレス」を正しく関連付けます。
3. よくある失敗例とその改善策
a. アクセシブルな名前がラベルと一致していない
失敗例
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" aria-label="入力してください">
問題点
- 視覚的なラベル「ユーザー名」と
aria-labelが一致していない。
改善策
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" aria-label="ユーザー名">
b. ボタンのラベルが不足している
失敗例
<button>
<img src="send-icon.png">
</button>
問題点
- 画像だけではラベルとして認識されない。
改善策
<button aria-label="送信">
<img src="send-icon.png" alt="">
</button>
4. アクセシビリティのメリット
a. スクリーンリーダーユーザーへの配慮
- 視覚的なラベルと一致する名前が提供されることで、スクリーンリーダーユーザーが操作内容を正確に把握できます。
b. 一貫性の向上
- 視覚的な情報と音声の情報が一致するため、すべてのユーザーにとって直感的で分かりやすい体験が提供されます。
c. エラーの軽減
- ラベルが一致していることで、誤操作や混乱を防ぐことができます。
5. テスト方法
a. 手動テスト
- スクリーンリーダーを使用して、視覚的なラベルと読み上げられる名前が一致しているか確認。
- 要素の
aria-labelやaria-labelledbyが適切に設定されているか確認。
b. 自動テストツール
- AxeやWAVEを使用して、アクセシブルな名前の適切性を検証。
まとめ
WCAG 2.2の「2.5.3 ラベルと名前の一致」は、視覚的なラベルとアクセシブルな名前が一致するようにすることで、すべてのユーザーが操作を正確に理解できるようにすることを目的としています。
実装ポイント
- 視覚的なラベルをアクセシブルな名前として使用する。
- カスタムラベルの場合、
aria-labelledbyを使用する。 - 画像ラベルの場合、
alt属性やaria-labelを設定する。
これにより、すべてのユーザーにとって直感的で使いやすいインターフェースを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。