フォーム要素にはラベルが必要です

プログラムによってすべてのフォーム コントロールにラベルを関連付けます。ほとんどの状況で推奨される方法は、 label 要素と、 for および id 属性を使用した明示的な関連付けを使用することです。ここでの例は、最も一般的な許容可能な解決策から、最も一般的でない許容可能な解決策の順に並べられています。

<label for="firstname">First name:</label> <input type="text" id="firstname">

入力の周囲に 要素をラップすることで、ラベルを 暗黙的に <label> 使用することもできます。

<label>First name: <input type="text"></label>

入力が、検索送信ボタンの虫眼鏡アイコンなど、他の方法ですでに視覚的にラベル付けされている場合は、 aria-label を使用して、スクリーン リーダーが読み取るための目に見えないテキスト ラベルを作成することが許容される可能性があります。

<input type="text" aria-label="Search">

別の方法としては、 <label> タグを追加すると機能やスタイルが壊れる場合や、複数のラベルが同じ入力に適用される場合に時々使用されますが、代わりに aria-labelledby を使用します。

<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">

<!--visual labels may be elsewhere in the content, such as in table headers-->

<div id="temperature">Temperature:</div>

<div id="high">High:</div>

<div id="low">Low:</div>

<!-- the inputs -->

<input type="text" aria-labelledby="temperature low">

<input type="text" aria-labelledby="temperature high">

最後に、 placeholder a属性を使用して、テキスト入力にアクセス可能な名前を付けることができます。これは 推奨されない解決策です 。ユーザーが入力にテキストを入力すると、視覚的なラベル (プレースホルダー テキスト) が削除され、入力の目的がわからなくなるためです。

<input type="text" placeholder="Search">

また、すべての id 要素が各ページで一意であること、およびラベル テキストがスクリーンリーダーで聞いている人にとって理解できるものであることを確認します。

ラベルが必要なフォーム要素

• テキスト入力フィールド、例: <input type="text">、 <input type="password"> および <textarea>
• ラジオボタン、 <input type="radio">
• チェックボックス、 <input type="checkbox">

この要件の唯一の例外は次のとおりです。

• ボタン - ボタンは自己ラベリング機能があります
• 非表示の入力 - type属性値がhiddenの入力 (例: type="hidden")。これらの入力は非表示になっており、ユーザーが入力することはできません。したがって、それらにはラベルは必要ありません。

ラベルを追加するときは、次の点に注意してください。

First name: <input type="text" name="fname">

このマークアップはレンダリングされ、横に「名前：」という単語が入ったテキスト ボックスを生成します。視覚に障害のないユーザーは、テキストを入力フィールドに関連付けるのに問題はありません。ただし、フォームが長く複雑になるにつれて、この接続は視覚障害のあるユーザーにとって明確ではなくなります。この曖昧さにより、特に必要な情報が名前よりも複雑な場合に、エラーが発生する可能性が高くなります。

これらのさまざまなラベル付け方法を実装する方法の詳細な手順については、このルールの一部として実行される自動チェックを参照してください。

最後に、各 input 要素にラベルが1つだけあることを確認してください。いずれかの input 要素にヘルプ テキストがある場合は、このテキストが label 要素のテキストと異なることを確認してください。