Frames with focusable content must not have tabindex=-1
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.
Refer to the complete list of axe 4.9 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: