インタラクティブコントロールはネストしてはいけません
ルールID:
nested-interactive
ルールセット:
axe-core 4.10
ユーザーへの影響:
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
Accessibility testing for dev teams - No experience required
Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.
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)]
- 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
Trusted Tester 指南
- 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.
EN 301 549 指南
- 9.4.1.2: Name, Role, Value
修正方法
正しいマークアップソリューション
対話型コントロール要素には、フォーカス可能な子孫があってはなりません。
<button>Submit</button>誤ったマークアップソリューション
<button>
Save
<a href="rules/axe/html#">More options</a>
</button>
<div role="button">
Search
<a href="rules/axe/html#">Settings</a>
</div>
なぜ重要なのか
対話型コントロールの祖先を持つフォーカス可能な要素 (ボタン要素やアンカー要素など、ユーザー入力を受け入れる要素) は、スクリーン リーダーによって読み上げられず、空のタブ ストップが作成されます。つまり、要素にタブ移動することはできますが、スクリーン リーダーはその要素の名前、役割、または状態を読み上げません。
ルールの説明
ネストされたインタラクティブコントロールはスクリーンリーダーによって読み上げられません
仕組みについて (簡単に言うと)
すべてのインタラクティブ コントロールをチェックし、フォーカス可能な子要素が含まれていないことを確認します。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: