label-for-valid

labelのfor属性には、ラベル付けできるコントロールを指定することを推奨します

manual確度:medium重大度:minorunderstandable

for属性がどの要素も示していないか、ラベル付けできない要素を示しているために、何もラベル付けしていないlabelを検出し、手動レビューに回します。

適用範囲:ページが表示している、空でないfor属性を持つ<label>要素です。

期待される結果:HTML:forを持つlabelは、ラベル自身のツリー内でそのidを持つ要素がラベル付け可能であればそれをラベル付けし、そうでなければ、ラベルの内容にかかわらず何もラベル付けしません。

  • forがラベル付け可能な要素(button、hidden以外のinput、meter、output、progress、select、textarea)、またはフォーム関連付けの可能性があるカスタム要素を示している場合:pass。
  • forがどの要素も示していない場合:cantTell(LABEL_FOR_TARGET_MISSING)。
  • forがラベル付けできない要素を示している場合:cantTell(LABEL_FOR_NOT_LABELABLE)。

どちらの場合もラベルは何もラベル付けしていません。どのコントロールのためのラベルだったのかを確認してください。そのコントロールは別の方法で名前が付けられている(それは名前のルールが判定します)か、そのための可視のラベルがないままになっている可能性があります。

検出結果が報告する内容:

  • for:ラベルが示すidです。
  • targetElement:LABEL_FOR_NOT_LABELABLEの場合、示された要素のタグです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<label for="email">Email</label>
<input id="email" type="email">

forがinputを示しているため、ラベルはそれをラベル付けしています。

can't tell
<label for="e-mail">Email</label>
<input id="email" type="email">

forがどの要素も示していないため、ラベルは何もラベル付けしていません。どのコントロールのためのものだったかを、人が確認します。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

LABEL_FOR_NOT_LABELABLE

  1. レポートに示されたラベルと、そのfor属性が指す要素(レポートにタグが示されています)を見つけてください。
  2. そのラベルがどのフォームコントロールのためのものだったかを読み取ってください。
  3. アクセシビリティペインでそのコントロールの算出された名前を読み、ラベルをクリックしてコントロールにフォーカスが移るか確認してください。

満たす場合:ラベルは説明するコントロールを指すように修正されているか、そのコントロールには別の方法ですでに同じ名前があり、ラベルは表示テキストにすぎません。

満たさない場合:ラベルがラベル付けできない要素を指しているため、意図されたコントロールはラベルから名前もフォーカスも得られず、HTMLのラベル付けされたコントロールの規則に関するベストプラクティスを満たしていません。

LABEL_FOR_TARGET_MISSING

  1. レポートに示されたラベルと、そのfor属性にあるidを見つけてください。
  2. ページの要素からそのidを検索し、スクリプトの実行後など、コントロールが後から現れるか確認してください。
  3. ラベルがどのコントロールのためのものだったかを読み取り、アクセシビリティペインでその算出された名前を読んで、ラベルをクリックするとそのコントロールにフォーカスが移るか確認してください。

満たす場合:ページの準備ができた時点でidが存在し、ラベルがコントロールに名前を付けてフォーカスを移します。

満たさない場合:そのidを持つ要素がないため、ラベルは何のラベルにもならず、コントロールはその名前を得られません。これはHTMLのラベル付けされたコントロールの規則に関するベストプラクティスを満たしていません。

ソースコードを見る