フォームの<input>要素にはラベルが必要です

ラベルをすべてのフォームコントロールにプログラムで関連付け、重複したラベルがないことを保証します。これは、暗示的な label 要素と明示的な label, aria-label, または aria-labelledby 属性値を使用することで可能になります。

ラベルを持つべきフォーム要素

• テキスト入力欄、例: <input type="text">、<input type="password"> および <textarea>
• ラジオボタン、<input type="radio">
• チェックボックス、<input type="checkbox">
• 選択式メニュー、<select>

この必須項目に対する唯一の例外は:

• ボタン — ボタンは自己でラベルを持つため
• 非表示の入力欄 — type 属性の値が hidden な入力欄 (例: type="hidden")。これらの入力欄は非表示かつユーザー入力ができないため、ラベルは必要ない

ラベルを追加する際は、次のことを避けてください:

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

このマークアップは、"First name:" という文言が隣接したテキストボックスを表示します。目の見えるユーザーは問題なくテキストと入力欄を関連付けられます。しかし、この関連性は、特にフォームが長く複雑になるほど、目の見えないユーザーにとっては明確ではありません。このあいまいさは、特に必須情報が名前より複雑だった場合、よりエラーを発生しやすくします。

上記の例を修正するには、ラベルテキスト (つまり "First name:") と入力欄を関連付ける必要があります。ベストプラクティスは、暗示的ではなく、明示的な関連付けを追加することです。すべてのモダンブラウザーと主要な支援技術は、すべてのフォーム要素に対する明示的なラベリングをサポートしています。明示的なラベルはフォーム要素のクリック可能な範囲を広げるという利点もあり、すべてのユーザー、特に運動障害のあるユーザーにとって、比較的小さなフォーム要素をクリックしやすくします。

ラベルを追加する方法

• 入力欄を囲む label 要素を追加する。これにより、ラベルと入力欄の間に、明示的ではなく、暗示的な関連性を作る。
• for 属性の値が入力の ID 属性である label 要素を入力欄と関連付ける。これにより、ラベルと入力欄の間に暗示的ではなく明示的な関係性を作る。
• aria-label 属性値を使用する。
• aria-labelledby 属性値を使用する。

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

最後に、各 input 要素のラベルは一つのみであることを確認しましょう。input 要素のどれかにヘルプテキストがある場合、このテキストが label 要素のテキストと異なる必要があることに注意してください。