フォームの<input>要素には表示可能なラベルが必要です
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- 視覚障害
- 視聴覚障害
- 運動障害
Standard(s)
- Deque Best Practice
修正方法
各フォームコントロールに aria-label, aria-labelledby, 暗黙的な <label> または明示的な <label> を用いてラベルを提供します。
aria-label と aria-labelledby を使用する
多くの場合、<label> タグを用いて標準的なフォームラベルを提供することが最も良い方法です。<label> タグは、特に古いブラウザーや古いスクリーン・リーダーの間で、最も便利で、最も広くサポートされたフォーム要素をラベル付けする方法です。しかし、中にはより柔軟なラベル付けの方法が必要な場面があります。<label> タグの制限の一つは、一つのフォーム要素としか関連付けられないことです。より複雑なラベル構造が求められる状況では、<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">明示的なラベル
フォームコントロールと同じ id 属性を値に持った for 属性を label 要素に付与することで明示的な関連性を作ります。これにより、ラベルと要素の間で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 および aria-describedby 属性はヒントなどの追加の情報を提供するために使用されます。ヒントはラベルなどとは異なる方法でアクセシビリティ API に公開されるため、支援技術で問題が発生する可能性があります。
テキスト入力欄、ラジオボタン、チェックボックス、そして選択メニューなどのフォーム入力が title や aria-describedby 属性値以外のラベルを含まない場合、スクリーン・リーダーはコンテンツがただの補足的な情報であると解釈します。title や aria-describedby 値で作成されたラベルは、入力フォーム要素の目的を伝えるためのプログラムによる解釈が可能な、コードからの正確なラベルを作るには十分ではありません。
ルールの説明
フォームの <input> 要素には title または aria-describedby 属性を使用してタイトルをつけることができます (ただし両方は付与できません)。これらの属性は、ヒントなどの追加の情報を提供するために使用されます。
仕組みについて (簡単に言うと)
ラベルを必要とするすべての <input> に title または aria-describedby 属性以外のラベルが存在することを確認します。
リソース
axe 4.3 ルールの一覧 を参照する
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: