form-control-label-quality

フォームフィールドのラベルは内容が分かり区別できることが推奨されます

manualWCAG 2.4.6 (AA)確度:medium重大度:minoroperable

可視のフォームフィールドのラベルが仮の文言(「Label」、「Field」)である場合や、2つを区別する可視の文脈(見出し、legend、行)がないまま別のフィールドのラベルと同じである場合に報告します。英語のプレースホルダー的な語は常に認識し、ドイツ語、スペイン語、フランス語、日本語のものは、フィールドがその言語である場合に認識します。

適用範囲:可視のフォームフィールド。ネイティブのinput(hiddenとボタン型のタイプを除く)、select、textarea、またはACT cc0f0aが挙げるARIAウィジェットロール(checkbox、combobox、listbox、menuitemcheckbox、menuitemradio、radio、searchbox、slider、spinbutton、switch、textbox。role属性の実在するロールの最初のトークンで判定し、大文字と小文字は区別しません)のいずれかを持つ要素のうち、可視のプログラムによるラベル(<label>による関連付け、またはaria-labelledbyが参照する要素)を持つものです。aria-label/titleだけで名前が付けられたフィールドには判定すべき可視のラベルがないため、ここでは対象外です(そのラベル付けの仕組みはform-control-programmatic-label-quality、ラベルの有無はform-control-programmatic-label-presentが扱います)。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。確認を求める対象が見つからない場合は、passではなくnotApplicableを報告します。このルールが適用されるのはチェックが検出するものだけであり、そこに何も見つからなくても、すべて問題ないことは示されないためです。

期待される結果:可視のラベルテキストが、(a) マークアップに残された仮の文言(「label」「field」「enter text」など)ではない、(b) 可視の文脈で区別できない別のフィールドと共有されていない(同じ「Name」が2回あり、どちらが配送先でどちらが請求先かを示すものが画面上に何もない、など)、(c) 説明的な部分が隠されたラベルの見えている一部ではなく、フィールドのプログラムによるラベル全体である、の3つを満たしています。

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

  • label:フィールドの可視のラベルテキストです。
  • sharedWith:同じラベルを持ち、見た目で区別できるものが何もない他のフィールドの数です。共有しているフィールドがない場合は0です。
  • hiddenLabelParts:フィールドのラベルのうち、見えないように隠されている部分の数です。ラベル全体が見えている場合は0です。

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

例

can't tell
<label>Label <input type="text" name="f1"></label>

ラベルのテキストが仮の文言「Label」そのもので、フィールドの実際の説明になっていません。

n/a
<label for="e">Email address:</label>
<input id="e" type="text">

ラベルのテキストが、フィールドを正しく説明する名前になっています。

確認方法

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

DUPLICATE_LABEL_TEXT

  1. レポートに示されたフィールドと、同じ表示ラベルを持つほかのフィールドを見つけてください。
  2. それぞれの周囲の画面を確認し、どれがどれかを示すlegend、見出し、行のテキスト、近くのテキストを探してください。
  3. フィールドが同じことを求めている(繰り返される検索ボックス)か、異なることを求めている(配送先と請求先の名前)かを判断してください。

満たす場合:フィールドは同じ目的を果たしているか、それぞれの近くにある表示されたものによってどれがどれかが明確です。

満たさない場合:異なるフィールドがラベルを共有し、それらを区別する表示されたものがないため、利用者はどれに入力すべきかわからず、WCAG 2.4.6を満たしません(G131)。

PARTIALLY_HIDDEN_LABEL

  1. レポートに示されたフィールドを見つけ、画面上の表示ラベルを読んでください。
  2. アクセシビリティペインでフィールドを調べ、隠れた部分を含む算出された名前の全体を読んでください。
  3. グループのタイトル、見出し、入力欄のある行や列など、入力欄の周りに見えていて、隠れた部分の意味を補えるものを確認してください。
  4. 見えているラベルが、周りに見えているものと合わせて、目で見る利用者に何を入力・選択するかを伝えているか判断してください。

満たす場合:ラベルの見えている部分が、単独で、または周りに見えているものと合わせて入力欄を説明しており、隠れた部分は詳細を補うだけです。

満たさない場合:ラベルの見えている部分も周りに見えているものも、隠れた部分なしでは入力欄を識別できない(「実行」だけが表示されているなど)ため、WCAG 2.4.6を満たしません(ACT cc0f0a)。

PLACEHOLDER_LABEL_TEXT

  1. レポートに示されたフィールドを見つけ、その表示ラベルを読んでください。
  2. ページからフィールドの用途を読み取ってください。
  3. ラベルがその用途を伝えているか、「ラベル」「フィールド」「テキストを入力」のようなテンプレートの文字列であるかを判断してください。

満たす場合:ラベルは、この文脈でフィールドが求めるものを表す実際の名前です(たとえば、キーと値のエディターでの「値」)。

満たさない場合:ラベルは仮の文字列で、フィールドの用途を伝えていないため、WCAG 2.4.6を満たしません(G131)。

ソースコードを見る