フォームのコントロールとラベルが関連付けられていません
WAI / WCAG 1.0 優先度2 チェックポイント 12.4
 
 
概要

Webページに、コントロールと対応するラベルがlabel要素で関連付けられていないフォームがあります。

 
 
修正方法

ラベルとコントロールの関連付けは、以下の3つのステップで行ってください。

  1. id属性を用いて、コントロールにユニークなIDを割り当てる。
  2. そのコントロールと関連付けたいテキストまたはイメージのラベルをlabel要素でマークアップする。
  3. そのlabel要素にfor属性を付加して、その属性値にコントロールのid属性値と同じ値を記述する。
 
 
解説

フォームをTabキーで操作しているとき、画面を見ているユーザーは、コントロールをすぐ近くにあるラベルと容易に関連付けることができます。しかしながら、スクリーンリーダーのユーザーは、視覚的に判断することができません。どのラベルがどのコントロールと対応しているのかを明示的に関連付けることが必要です。

ベストな方法は、label要素を用いてこの関連付けを行うことです。label要素でラベルとなるテキストをマークアップして、label要素のfor属性値をコントロールのid属性値と同じ値にします。

原則として、1つのラベルは1つのコントロールと関連付けることができますが、2つ以上のラベルを同じコントロールに関連付けることも可能です。ただ、すべてのスクリーンリーダーがサポートしているわけではないので、各コントロールに対して1つのラベルを関連付けることを推奨します。

あるラベルをあるコントロールと暗黙的に関連付けることも可能です。ラベルとなるテキストとコントロールの両方をlabel要素で囲みます。このテクニックは、HTML 4.01の勧告文書(標準仕様)で示されていますが、まだすべてのスクリーンリーダーがサポートしているわけではありません。