Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1
How to Fix the Problem
Correct markup solutions
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
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.
%lt;iframe%gt; elements with focusable content must not have
The Algorithm (in simple terms)
<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.