フォームフィールドには複数のラベル要素を含めることはできません
ルールID:
form-field-multiple-labels
ルールセット:
axe-core 4.10
ユーザーへの影響:
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
Learn Web Accessibility
Subscribe to our extensive curriculum of online self-paced courses
Compliance Data & Impact
Disabilities Affected
- 盲目
- 視力低下
- 盲ろう者
- 運動・器用さ
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 3.3.2: Labels or Instructions
WCAG 達成基準 [WCAG 2.0 (A)]
- 3.3.2: Labels or Instructions
WCAG 達成基準 [WCAG 2.2 (A)]
- 3.3.2: Labels or Instructions
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).
修正方法
フォーム フィールドに1つのラベルのみを割り当てることを確認してください。
正しいマークアップソリューション
form-field-multiple-labels ルールには、分析に合格する5つのマークアップ パターンが含まれています。
<label for="pass1">Label</label>
<input type="text" id="pass1" />
<textarea id="pass2" title="Label"></textarea>
<label>First Name: <input type="text" id="pass3" /></label>
<label>Choose an option:
<select id="pass4">
<option selected="selected">Chosen</option>
<option>Not Selected</option>
</select>
</label>
<label>Enter your comments:
<textarea id="pass5"></textarea>
</label>
注意: スクリーンリーダーとブラウザの組み合わせでは、複数の form 要素ラベルが一貫してサポートされません。
以下のマークアップ例は、axe-core 3.4.0リリース時点でここに記載された以下のスクリーン リーダーとブラウザーの組み合わせで動作します。スクリーン リーダーとブラウザー テストの組み合わせの詳細については、「 単一入力の複数のラベル 」を参照してください。
<input type="checkbox" id="D" aria-labelledby="E"/>
<label for="D" aria-hidden="true">Please</label>
<label for="D" id="E">Excuse</label>
<input type="checkbox" id="F" aria-labelledby="G H"/>
<label for="F" id="G" aria-hidden="true">Please</label>
<label for="F" id="H">Excuse</label>
<input type="checkbox" id="I"/>
<label for="I" style="display:none">Please</label>
<label for="I">Excuse</label>
フォーム要素ごとに1つの表示ラベルが存在することを確認します。これにより、ほとんどのスクリーン リーダーとブラウザーの組み合わせで正しい機能が実現します。aria-hidden 属性だけを使用するだけでは不十分で、CSSを使用して追加のラベルを非表示にする必要があります。
誤ったマークアップの例
form-field-multiple-labels 分析に失敗する9つのマークアップ パターンがルールに含まれています。
<label for="fail1">Hi</label>
<label for="fail1">Foo</label>
<input type="text" id="fail1" />
<label for="fail2">label 1 one</label>
<label for="fail2">label 2 two</label>
<input type="checkbox" id="fail2" />
<label for="fail3" id="l1">label one</label>
<label for="fail3">label two</label>
<input type="checkbox" id="fail3" aria-labelledby="l1" />
<label for="fail4">名前:</label>
<label>名前:
<input type="text" id="fail4" />
</label>
<label for="fail5">オプションを選択:</label>
<label>オプションを選択:
<select id="fail5">
<option selected="selected">選択済み</option>
<option>未選択</option>
</select>
</label>
<label for="fail6">コメントをinputしてください:</label>
<label>コメントをしてください:
<textarea id="fail6"></textarea>
</label>
<label>コメントをしてください:
<label>コメントをしてください:
<textarea id="fail7"></textarea>
</label>
</label>
<label>コメントをしてください:
<label>コメントをしてください:
<label>コメントをしてください:
<textarea id="fail8"></textarea>
</label>
</label>
</label>
<label for="fail9">コメントをinputしてください:</label>
<label>コメントをしてください:
<label>コメントをしてください:
<label>コメントをしてください:
<textarea id="fail9"></textarea>
</label>
</label>
</label>
なぜ重要なのか
同じフォーム フィールドに複数のラベルを割り当てると、スクリーン リーダーとブラウザーの組み合わせによっては問題が発生し、組み合わせごとに結果が一致しなくなる可能性があります。いくつかの組み合わせでは最初のラベルが読み取られます。いくつかの組み合わせでは最後のラベルが読み取られます。他の組み合わせでは両方のラベルが読み取られます。
ルールの説明
フォーム フィールドに複数のラベルがないことを確認します。
仕組みについて (簡単に言うと)
フォーム フィールドに複数のラベルがないことを確認します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: