選択要素にはアクセス可能な名前が必要です
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- 盲目
- 視力低下
- 運動・器用さ
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Section 508
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.0 (A)]
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.2 (A)]
- 4.1.2: Name, Role, Value
Section 508 ガイドライン
- 1194.22: Web based intranet and Internet Information & Applications
- 1194.22 (n): When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
Trusted Tester 指南
- 5.C: The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical).
EN 301 549 指南
- 9.4.1.2: Name, Role, Value
修正方法
プログラムによってラベルを選択要素に関連付けてください。ほとんどの状況で推奨される方法は、 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つだけあることを確認します。
なぜ重要なのか
フォームをアクセス可能にするには、効果的なフォーム ラベルが必要です。チェックボックス、ラジオボタン、入力フィールドなどのフォーム要素の目的は、フォーム要素がプログラムでラベル付けされていない場合でも、視覚のあるユーザーには明らかであることが多いです。スクリーン リーダーのユーザーには、フォーム フィールドを識別するための便利なフォーム ラベルが必要です。すべてのフォーム要素にラベルを追加すると、曖昧さがなくなり、よりアクセスしやすい製品が実現します。
フォーム要素のラベルがない場合、スクリーン リーダーのユーザーは入力データの期待値を把握できません。スクリーン リーダーは、ラベル関係が確立されていない (またはラベルとして機能する冗長テキストがない) と、入力オブジェクトに関する情報をプログラムで判別できません。
ルールの説明
各選択要素には、プログラム的に関連付けられたラベル要素が必要です。
仕組みについて (簡単に言うと)
すべての選択要素にプログラム的に関連付けられたラベルがあることを確認します。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: