form-control-single-label

フォームコントロールに複数のラベルを関連付けないことを推奨します

automaticWCAG 3.3.2 (A)確度:high重大度:moderateunderstandable

フォームコントロールに関連付けられた<label>が(囲む形またはlabel[for]で)最大1つであることを確認します。

適用範囲:ラベル付け可能なフォームコントロール(input(hidden/submit/reset/button/imageを除く)、select、textarea)に適用されます。

期待される結果:コントロールのアクセシブルな名前に寄与しうる<label>で、HTMLの「ラベル付けされたコントロール」の定義に従ってコントロールに関連付けられたものは最大1つです。関連付けとは、値がラベル自身のツリー内でそのidを持つ最初の要素のidである<label for="...">、またはforを持たず、ラベル付け可能な最初の子孫がそのコントロールである、囲む形の<label>です(囲みつつforで自身を参照しているラベルは1つと数えます)。余分なラベルが実際に名前を取り合っているかどうかで判定します。

  • 上書き(aria-labelledby/aria-label)がすべてのネイティブの<label>より優先される場合はPASS。ラベルは名前に何も寄与しないため、曖昧になりようがありません。可視のラベルと名前の不一致は達成基準2.5.3「ラベルを含む名前 (name)」が扱うもので、このルールの対象ではありません。
  • 空でないラベルが2つ以上競合し、上書きがない場合はCANTTELL。ブラウザーはそれらのテキストをDOMの順序で1つの名前につなげます。つなげた名前が意味をなすか(「Address Mailing address」)、雑音に聞こえるかは、人にしか判断できません。
  • 空でないラベル1つに空のラベルの関連付けが加わり、上書きがない場合はCANTTELL。名前は通常は本来のラベルに解決されますが、空の関連付けの扱いはユーザーエージェント間で保証されていません。

関連付けがすべて空で上書きもない場合は、曖昧さではなく名前の欠落のケース(form-control-programmatic-label-presentが扱います)なので、このルールは何も報告しません。

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

  • labelCount:コントロールに関連付けられたラベルの数です。ラベルが競合する場合は空でないものだけを数え、空のラベルの場合は空のものも数えます。
  • contributingLabelCount(空のラベルの場合):それらのラベルのうち、テキストを持ち、コントロールに名前を与えているものの数です。

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

例

pass
<label>Name <input type="text"></label>

囲む形のラベルが1つだけで、適用されるラベル付けの仕組みは1つだけです。

can't tell
<label for="address">Address</label>
<label for="address">Mailing address</label>
<input id="address" type="text">

別々のlabel[for]要素が2つとも同じコントロールを対象にしています。ブラウザーはそれらを1つの名前「Address Mailing address」につなげます。それが読みやすいままかどうかは、人にしか判断できません。

確認方法

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

FORM_FIELD_EXTRA_EMPTY_LABEL

  1. レポートに示されたフィールドを見つけ、テキストのあるラベルと、同じフィールドを指している空のラベルを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、フィールドの名前が実際のラベルのテキストであることを確認してください。
  3. スクリーンリーダーでTabキーを使ってフィールドに移動し、名前を聞いてください。

満たす場合:フィールドの名前は実際のラベルのテキストであり、空のラベルによって失われるものはありません。

満たさない場合:空のラベルのためにフィールドに名前がないか不完全な名前になっており、WCAG 3.3.2(および4.1.2)を満たしません。

FORM_FIELD_MULTIPLE_LABELS

  1. レポートに示されたフィールドを見つけ、それを指している各ラベルのテキストを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、すべてのラベルを連結したフィールドのアクセシブルな名前を読んでください。
  3. スクリーンリーダーでTabキーを使ってフィールドに移動し、名前を聞いてください。
  4. 連結された名前が、何を入力すべきかを引き続き明確に伝えているか判断してください。

満たす場合:連結された名前は明確です。ラベルが互いに繰り返しになっているか、追加のラベルが「必須」のような目印にすぎません。

満たさない場合:連結された名前がわかりにくいか誤解を招きます。たとえば、関係のない2つのラベルがつながっており、WCAG 3.3.2を満たしません(2.5.3と4.1.2も満たさない場合があります)。

ソースコードを見る