概要
正しくコーディングされたラベルとは、ページの基盤となるコード内で特定のフォーム項目に明示的に紐付けられたテキストです(通常は項目のidに一致するfor属性を通じて)。これにより、訪問者がその項目にフォーカスを移した瞬間に、スクリーンリーダーがそのラベルを読み上げます — 例えば「メールアドレス、テキスト編集」のように。これは、コンバージョン率に焦点を当てた一般的なフォーム項目ラベリングガイドで扱っている、単に項目の近くのどこかにラベルのようなテキストが見えるということよりも、厳格で技術的な要件です。
項目は、晴眼の訪問者には完璧にラベル付けされているように見えても(テキストが入力欄のすぐ横にある)、そのテキストと項目の間にコード上の実際の接続がまったくないことがあります — これがまさに、このアクセシビリティ重視のチェックが探しているギャップです。
重要な理由
スクリーンリーダーはページの視覚的レイアウトを見ません — 基盤となるコード構造を読みます。そのため、視覚的に項目の近くにあるだけでコード上で明示的に紐付けられていないラベルは、スクリーンリーダー利用者がその項目に到達したときに一切読み上げられないことがあります。項目が何のためのものか聞こえないと、彼らは推測するか完全にスキップするしかなく、これは晴眼の訪問者には完全にシンプルに感じられるフォームを、スクリーンリーダー利用者が単に完了できないことを意味することがあります。
これは、多くの組織が法的に遵守しなければならない標準的なアクセシビリティガイドラインであるWCAGの中で、最も確立され、具体的に名前が付けられた要件の1つです。まさに、フォームが登録、チェックアウト、連絡といった、ウェブ上で実際にタスクを完了する上で非常に中心的な役割を果たすからです。
修正方法
- 各フォーム項目について、その項目の
id属性と正確に一致するfor属性を持つ<label>要素を追加しましょう。 - 代わりに、項目自体を
<label>タグの中に直接ラップすることもできます。これにより、一致するIDを必要とせずに同じ明示的な接続が作られます。 - 意図的に目に見えるラベルがまったくない項目(検索アイコンのみの項目など)については、項目に直接
aria-label="検索"を使用し、スクリーンリーダーがそれでも目的を読み上げるようにしましょう。 - 本物のラベルの代わりとしてプレースホルダーテキストのみに頼ることは避けましょう — スクリーンリーダーはプレースホルダーテキストを一貫性なく扱い、いずれにせよテキストが入力されると消えてしまいます。
- キーボードのみと無料のスクリーンリーダー(NVDA、VoiceOver)でフォームをタブ移動してテストし、各項目が明確な目的を読み上げることを確認しましょう。