フォームのコントロールとラベルが関連付けられていません | |
WAI / WCAG 1.0 優先度2 チェックポイント 12.4 | |
概要 Webページに、コントロールと対応するラベルがlabel要素で関連付けられていないフォームがあります。 |
|
修正方法
ラベルとコントロールの関連付けは、以下の3つのステップで行ってください。
|
|
解説 フォームをTabキーで操作しているとき、画面を見ているユーザーは、コントロールをすぐ近くにあるラベルと容易に関連付けることができます。しかしながら、スクリーンリーダーのユーザーは、視覚的に判断することができません。どのラベルがどのコントロールと対応しているのかを明示的に関連付けることが必要です。 ベストな方法は、label要素を用いてこの関連付けを行うことです。label要素でラベルとなるテキストをマークアップして、label要素のfor属性値をコントロールのid属性値と同じ値にします。 原則として、1つのラベルは1つのコントロールと関連付けることができますが、2つ以上のラベルを同じコントロールに関連付けることも可能です。ただ、すべてのスクリーンリーダーがサポートしているわけではないので、各コントロールに対して1つのラベルを関連付けることを推奨します。 あるラベルをあるコントロールと暗黙的に関連付けることも可能です。ラベルとなるテキストとコントロールの両方をlabel要素で囲みます。このテクニックは、HTML 4.01の勧告文書(標準仕様)で示されていますが、まだすべてのスクリーンリーダーがサポートしているわけではありません。 |