frame-focusable-content

Description

<iframe> and <frame> elements that contain focusable content must not have tabindex="-1" set on them. Setting tabindex="-1" on a frame removes it and all of its child elements from the keyboard focus order. This means keyboard-only users and screen reader users cannot access any interactive content inside the frame, making it inaccessible.

Example

In the following example, the <iframe> contains an interactive form, but tabindex="-1" prevents keyboard users from focusing the frame or any element inside it. This breaks the frame-focusable-content rule.

In contrast, the following code snippet removes the tabindex="-1" attribute, allowing keyboard users to tab into the frame and interact with its content. This code does not break the frame-focusable-content rule.

How to fix?

Check if your site has <iframe> or <frame> elements that include focusable content (links, buttons, form fields, and so on) and also have tabindex="-1". If so:

• Remove the tabindex="-1" attribute from the frame element so keyboard users can navigate into it.
• If you want to prevent users from accessing the frame content, remove the focusable content from inside the frame rather than hiding the frame from the focus order.

Exceptions

• Frames that contain no focusable content can safely use tabindex="-1" without violating this rule.

Reference

• WCAG 2.1.1: Keyboard
• WCAG 2.1.3: Keyboard (No Exception)