Digital Accessibility Knowledge Base

frame-focusable-content

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

Who might be affected
Keyboard

Description

Iframes may contain interactable elements (e.g., <button>, <a>, <input />, etc.). Using tabindex=”-1” on an <iframe> will prevent keyboard users from reaching these elements by manual tabbing (as opposed to setting the focus programmatically). However, it is not prohibited to use tabindex=”-1” on an <iframe> if necessary, in cases where it does not contain any interactable elements.

Quick Fixes

In cases where you know that an <iframe> contains interactable elements, or if you are not sure, avoid using tabindex=”-1”.
1    ✓ <iframe src="external-page-url.html"><iframe>
2

3    ✓ <iframe src="external-page-url.html" tabindex="0"><iframe>
4

5    ✗ <iframe src="external-page-url.html" tabindex="-1"><iframe>

How Users Are Affected

Keyboard-only users will not be able to reach and interact with elements within the <iframe>.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.1.1 Keyboard (A)