フォームパーツにアクセシブルネームがある
概要
この基準では、フォームの要素（入力欄、ボタンなど）が、見えるラベルに関わらず、スクリーンリーダーのような支援技術によって正しく認識される「アクセシブルネーム」を持っていることを確認してください。
アクセシブルネーム(Accessible Name)とは
アクセシブルネーム（Accessible Name）は、スクリーンリーダーや他の支援技術によって識別・読み上げられる要素（ボタン、リンク、フォームフィールドなど）の名前です。この名前は、ユーザーがその要素の機能や目的を理解するのに役立ちます。
アクセシブルネームの計算は、Accessible Name and Description Computationに従って行なわれ、要素に適用されるさまざまな属性（alt、aria-label、aria-labelledbyなど）からアクセシブルネームを決定します。要素のテキストコンテンツや関連するテキストがアクセシブルネームとして使用されることがあります。
メリット
- 視覚障害のあるユーザー: スクリーンリーダーがアクセシブルネームを読むことで、画面が見えない状況でもフォームの各部分を正しく理解し、操作できます。
- 開発テストでの活用: アクセシブルネームが設定されていると、自動テストや手動テストにおいて要素を識別しやすくなります。これにより、テストケースの作成や実行が容易になり、開発プロセス全体の効率が向上します。例えば、UIテストの自動化ツールは、明確なアクセシブルネームを使用して正確に要素を特定し、操作や検証を行なうことができます。
達成方法
明確なアクセシブルネームの提供:
label要素、aria-label、aria-labelledby属性などを使用して、フォームパーツに明確で具体的なアクセシブルネームを提供します。
可視ラベルとの整合性:
- 可視ラベルがある場合は、その内容がアクセシブルネームにも含まれるようにします。これにより、見えるラベルと支援技術によるラベルが一致し、混乱を避けられます。
テスト方法
アクセシブルネームの確認:
- 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers
アクセシブルネームと可視ラベルの一致:
- 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。