フォームフィールドに重複するラベルがありません
ルール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 Guidelines
- 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).
修正方法
フォーム欄に一つのラベルのみが指定するようにします。
正しいマークアップ方法
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 の時点で、ここに記された以下のスクリーン・リーダーおよびブラウザーの組み合わせで動作します。スクリーン・リーダーとブラウザーの組み合わせのテストについての詳細については、Multiple Labels on a Single Input をご参照ください。
<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>多くのスクリーン・リーダーとブラウザーの組み合わせで正しく動作することを保証するには、フォーム要素につき、視認できるラベルが一つしか存在しないことを確認します。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 one</label>
<label for="fail2">label 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">First Name:</label>
<label>First Name:
<input type="text" id="fail4" />
</label>
<label for="fail5">Choose an option:</label>
<label>Choose an option:
<select id="fail5">
<option selected="selected">Chosen</option>
<option>Not Selected</option>
</select>
</label>
<label for="fail6">Enter your comments:</label>
<label>Enter your comments:
<textarea id="fail6"></textarea>
</label>
<label>Enter your comments:
<label>Enter your comments:
<textarea id="fail7"></textarea>
</label>
</label>
<label>Enter your comments:
<label>Enter your comments:
<label>Enter your comments:
<textarea id="fail8"></textarea>
</label>
</label>
</label>
<label for="fail9">Enter your comments:</label>
<label>Enter your comments:
<label>Enter your comments:
<label>Enter your comments:
<textarea id="fail9"></textarea>
</label>
</label>
</label>
なぜ重要なのか
同じフォーム欄に複数のラベルを指定すると、いくつかのスクリーン・リーダーとブラウザーの組み合わせで問題を引き起こす可能性があり、組み合わせによって結果は異なります。いくつかの組み合わせは最初のラベルを読み上げます。いくつかは最後のラベルを読み上げます。他のものは両方のラベルを読み上げます。
ルールの説明
フォーム欄に複数のラベルが存在しないことを保証します。
仕組みについて (簡単に言うと)
フォーム欄に複数のラベルが存在しないことを保証します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: