フォーム要素には目に見えるラベルが必要です
Learn Web Accessibility
Compliance Data & Impact
Disabilities Affected
- 盲目
- 盲ろう者
- 運動・器用さ
Standard(s)
- Deque Best Practice
修正方法
aria-label、 aria-labelledby、暗黙的 <label> 、または明示的 <label>を使用して、すべてのフォーム コントロールにラベルを提供する必要があります。
aria-label 使用すると aria-labelledby
ほとんどの場合、 <label> タグを使用した標準フォーム ラベルを使用するのが最適です。<label> タグは、古いブラウザや古いスクリーン リーダーの中で、フォーム要素にラベルを付ける最も便利で、最も広くサポートされている方法です。ただし、オブジェクトにラベルを付けるより柔軟な方法が必要な状況もあります。 <label> タグの制限の1つは、1つのフォーム要素にのみ関連付けることができることです。より複雑なラベル構造が必要な場合、 <label> タグだけでは不十分です。ここで aria-label と aria-labelledby が登場します。
aria-label 属性を使用すると、フォーム要素、段落、表など、ほぼすべてのHTML要素にラベルを直接追加できます。
例： aria-label
ラベルは要素に直接適用され、完全に見えません。これはすべての視覚を持つユーザーにとって大きな不利ですが、スクリーン リーダーはラベルを読み取ります。
<input type="text" aria-label="Search">
注意: この方法は、特別な理由がない限り使用しないでください。<label> 通常は、可能な場合は常に望ましいです。
aria-labelledby 属性を使用すると、Webページ上の他の場所にあるテキスト ラベルを参照できます。aria-labelledbyを使用すると、複数のオブジェクトが同じテキスト ラベルを参照できるため、この方法は複雑なラベル付けの状況で非常に便利です。
例： aria-labelledby
注: aria-labelと同様に、この方法は、使用しなければならない特別な理由がない限り使用しないでください。この例は、 aria-labelledby 過度に単純化されています。技術的なレベルでの動作を示すためだけです。このような単純な状況で aria-labelledby 特定の用語を使用するのは不適切です。より標準的な <label> 特定のタグの方が良いでしょう。
<p id="search">Search</p>
<input type="text" aria-labelledby="search">明示的なラベル
明示的な 関連付けを作成するために、 label 要素に for 属性を指定し、その値をフォーム コントロールの id 属性と同じにします。これにより、ラベルと要素の間に1対1のマッピングが提供されます。これは、すべての最新ブラウザとすべてのフォーム要素の主要な支援技術でサポートされているため、ラベル付けに最適なアプローチです。
例: 明示的なラベル
明示的なラベルにより、支援技術にとって関連付けが明確になります。
<label for="fname">First Name:</label> <input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name:</label> <input type="text" name="lname" id="lname">暗黙のラベル
明示的なラベルを作成することをお勧めしますが、 暗黙的な 関連付けを作成するために、フォーム コントロールを label 要素内に配置します。このアプローチでは、支援技術間でサポートが一貫していません。たとえば、このアプローチをテキスト入力で使用すると、JAWSはラベルを意図したとおりに読み取りますが、このアプローチをメニューで使用すると、それは読まれません。 select
例: 暗黙的なラベル
暗黙的なラベルは許可されていますが、明示的なラベルほど広範囲に適用できず、信頼性も低くなります。
<label>First Name: <input type="text" name="fname"></label><br>
<label>Last Name: <input type="text" name="lname"></label>なぜ重要なのか
title 「The」および aria-describedby 「and」属性は、ヒントなどの追加情報を提供するために使用されます。ヒントはラベルとは異なる方法でアクセシビリティAPIに公開されるため、支援技術で問題が発生する可能性があります。
テキスト入力フィールド、ラジオ ボタン、チェック ボックス、選択メニューなどのフォーム入力に、 title 「」および aria-describedby 「」属性値以外のラベルが含まれていない場合、スクリーン リーダーはコンテンツをアドバイス情報としてのみ解釈します。title 「」および aria-describedby 「」値によって作成されたラベルは、入力フォーム要素の目的を伝えるためにコードからプログラム的に決定できる真のラベルを作成するには不十分です。
ルールの説明
フォーム <input> 要素には、 title または aria-describedby 属性（両方は不可）を使用してタイトルを付けることができます。これらの属性は、ヒントなどの追加情報を提供するために使用されます。
仕組みについて (簡単に言うと)
ラベルを必要とするすべての <input> に、 title または aria-describedby 属性以外のラベルがあることを確認します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: