form-control-programmatic-label-quality
フォームコントロールには画面に表示されるラベルがあることが推奨されます
アクセシブルな名前がplaceholder、title、aria-label、または非表示のテキストだけを参照するaria-labelledbyから得られているフォームコントロールを報告します。これらはいずれも画面に表示されるラベルではありません。表示される<label>、または表示されるテキストを参照するaria-labelledbyの使用が推奨されます。
適用範囲：支援技術に公開される、ラベル付け可能なネイティブのフォームコントロールに適用されます。
- input（type=hidden|submit|reset|button|imageを除く）
- select
- textarea
role="presentation"/"none"は、フォーカス可能でない場合にのみ除外されます。画面に描画されないコントロールは除外されます。透明なもの（自身または祖先のopacityが0）や、視覚的に非表示のテキストと同じようにクリップされて見えないもので、スタイル付きのトグルの後ろに隠されたチェックボックスがその例です。そうしたコントロールには判断すべき表示されるラベルがなく、判断の対象はその代わりに表示されているものです。プログラムによる名前を持つコントロールだけが対象です。名前がまったくないコントロールはform-control-programmatic-label-presentの検出結果であり、名前の質を問う対象ではありません。
期待される結果：コントロールがプログラムによる名前を持つ場合、その名前が次のものだけから得られるべきではありません。
- placeholder（空でないもの）
- title（空でないもの）
- aria-label
- 参照先の要素がすべてレンダリングされていない（hidden、display:none、visibility:hidden）aria-labelledby
関連付けられた<label>、または表示されるテキストを参照するaria-labelledbyの使用が推奨されます。
検出結果が報告する内容：
labelMethod：コントロールのラベルがどこから来ているかを示します。placeholder、title、aria-label、aria-labelledbyのいずれかです。reasonCode：label_from_placeholder_primary、label_from_title_primary、label_from_aria_label_only、label_from_hidden_labelledbyのいずれかです。sourceText：ラベルのテキストで、最大120文字です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<label for="email">Email address</label><input type="text" id="email" placeholder="name@example.com">
常に表示される<label>が名前を提供しており、ここでのplaceholderは書式のヒントにすぎません。
<input type="text" placeholder="Email address">
コントロールの名前はplaceholderだけから得られており、ユーザーが入力を始めると消えてしまいます。
<input type="text" title="Name">
コントロールの名前はtitleだけから得られており、ホバーしたときにしか表示されません。placeholderもtitleもコントロールに名前を与えるためWCAG 4.1.2は満たされますが、欠けているのは誰にでも表示されるラベルで、これは達成基準3.3.2の問題です。
<input type="search" aria-label="Search">
コントロールの名前はaria-labelだけから得られており、画面にはまったく表示されません。検索ボタンなど、フィールドの隣に表示されているテキストによって晴眼のユーザーには用途が伝わる可能性もあるため、不合格ではなく確認が必要です。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
label_from_aria_label_only
- レポートに示されたフィールドを画面上で見つけ、レポートに示されたそのaria-labelを読んでください。
- フィールドの隣に、何を入力するかを伝えるテキスト（見えるラベル、見出し、凡例）が表示されているか探してください。
満たす場合：フィールドの隣に表示されたテキスト、または検索フィールドの虫眼鏡のように意味の明らかなアイコンが、何を入力するかを伝えています。
満たさない場合：画面上の何もフィールドに何を入力するかを伝えておらず、WCAG 3.3.2を満たしません。
label_from_hidden_labelledby
- レポートに示されたフィールドを見つけ、開発者ツールでaria-labelledbyのIDをたどって、参照先の要素を確認してください。
- フィールドが表示されているとき、それらの要素も画面に表示されているか確認してください。
- 入力欄の隣に、何を入力するかを示す別のテキストが表示されているか探してください。検索欄の直後の「検索」ボタンのように、何をするかを示すボタンが入力欄のすぐ後にある場合も認めます。
満たす場合：ラベルのテキストが入力欄とともに表示されているか、隣の別のテキスト、またはすぐ後の「検索」のようなボタンが、何を入力するかを示しています。
満たさない場合：ラベルは隠れた要素の中にしかなく、画面上の何も何を入力するかを伝えていないため、WCAG 3.3.2を満たしません。
label_from_placeholder_primary
- レポートに示されたフィールドを見つけ、そのプレースホルダーを読んでください。
- フィールドに何か入力してください。
- 画面にまだ表示されているもの（ラベルや隣のテキスト）が、入力欄の用途を示しているか確認してください。検索欄の直後の「検索」ボタンのように、何をするかを示すボタンが入力欄のすぐ後にある場合も認めます。
満たす場合：入力後も、ラベル、入力欄の隣のテキスト、またはすぐ後の「検索」のようなボタンが画面に残り、何を入力するかを示しています。
満たさない場合：入力すると、フィールドが何のためのものかを画面上の何も伝えなくなるため、WCAG 3.3.2を満たしません。
label_from_title_primary
- レポートに示されたフィールドを、ホバーせずに確認してください。
- 隣に、何を入力するかを示すテキストが表示されているか探してください。検索欄の直後の「検索」ボタンのように、何をするかを示すボタンが入力欄のすぐ後にある場合も認めます。
- キーボードのTabキーでフィールドに移動し、titleのツールチップが表示されないことを確認してください。
満たす場合：マウスを重ねなくても、入力欄の隣のテキスト、またはすぐ後の「検索」のようなボタンが、何を入力するかを示しています。
満たさない場合：何を入力するかは、マウスでホバーしたときに表示されるtitleでしか伝えられておらず、キーボードやタッチの利用者には見えないため、WCAG 3.3.2を満たしません。