フォームフィールドには複数のラベル要素を含めることはできません
ルール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
Start building more accessible experiences
Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.
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 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: