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

Rule ID: frame-focusable-content
Ruleset: axe-core 4.4
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

WCAG Success Criteria [WCAG 2.1 (A)]

  • 2.1.1: MUST: Keyboard

WCAG Success Criteria [WCAG 2.0 (A)]

  • 2.1.1: MUST: Keyboard

How to Fix the Problem

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>

Why it Matters

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.

Rule Description

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

The Algorithm (in simple terms)

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.

Resources

Deque University Course Pages (subscription required)

No related course information available.

Contribute to axe-core on GitHub

Refer to the complete list of axe 4.4 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: