インタラクティブコントロールはネストしてはいけません

ルールID: nested-interactive
ルールセット: 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 development 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

User 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 コースのページ (要登録)

関連するコース情報はありません。

GitHub で axe-core に貢献する

axe 4.10 ルールの一覧 を参照する

この情報は役に立ちましたか?

すでにフィードバックをいただきました、ありがとうございます。.

あなたの回答は次のとおりです。

この情報は役に立ちましたか?
フィードバックが提出された日付/時刻: