Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1

ルールID: frame-focusable-content
ルールセット: 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

User Impact

深刻
▼
Minor
Critical

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)]

  • 2.1.1: 必須: Keyboard

WCAG 達成基準 [WCAG 2.0 (A)]

  • 2.1.1: 必須: Keyboard

WCAG 達成基準 [WCAG 2.2 (A)]

  • 2.1.1: 必須: Keyboard

Trusted Tester Guidelines

  • 4.A: 必須: All functionality can be accessed and executed using only the keyboard.

    修正方法

    Correct markup solutions

    The frame-focusable-content rule is inapplicable for frames without tabindex, or with a non-negative tabindex:

    <iframe
    srcdoc="<button>Click me</button>"
    tabindex="0"
    title="My frame is an iframe"
  ></iframe>

    In some cases, if the frame does not need any keyboard navigation or keyboard scrolling, tabindex="-1" can be used on iframes.

    <iframe
  srcdoc="<p>Hello world</p>"
  tabindex="-1"
  title="My frame is an iframe"
></iframe>

    While in some scenarios, negative tabindex on a frame may not cause accessibility problems, it is easy for it to become an accidental accessibility issue after an update to the content of the iframe. It is therefore better to avoid negative tabindex on frames all together.

    Incorrect markup solutions

    The frame-focusable-content rule fails the following markup pattern:

    <iframe
    srcdoc="<button>Click me</button>"
    tabindex="-1"
    title="My frame is an iframe"
  ></iframe>

    なぜ重要なのか

    When a frame has a negative tabindex, the browser is prevented from redirecting the focus to the content inside that frame. This causes all its content from getting skipped in keyboard navigation, and if the frame is scrollable also prevents the focus from reaching any element from which the frame can be scrolled with the keyboard.

    ルールの説明

    %lt;frame%gt; and %lt;iframe%gt; elements with focusable content must not have tabindex="-1".

    仕組みについて (簡単に言うと)

    Check all <frame> and <iframe> elements that have a negative tabindex number, such as tabindex="-1". If there are such frames, check that they do not contain focusable elements, or have nested frames with focusable elements.

    リソース

    Deque University コースのページ (要登録)

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

    GitHub で axe-core に貢献する

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

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

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

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

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