選択要素にはアクセス可能な名前が必要です

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

<label for="state">State:</label> <select id="state"></select>

ラベルは、 要素を選択範囲の周囲にラップすることで、 暗黙的に <label> 付けることもできます。

<label>State: <select></select></label>

選択項目がすでに他の方法で視覚的にラベル付けされている場合は、 aria-label を使用して、スクリーンリーダーが読み取るための目に見えないテキストラベルを作成することが許容される可能性があります。

<select aria-label="State"></select>

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

<div id="state">State:</div> <select aria-labelledby="state"></select>

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

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

State: <select></select>

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

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

最後に、各 select 要素にラベルが1つだけあることを確認します。