Rule ID: ace-nav-frame-focusable

Confirm embedded frames with focusable content are not removed from tab order

WCAG 2.0 (A) - WCAG 2.2 (A) 2.1.1: Keyboard Blind Mobility User Impact

What This Rule Checks

When an iframe contains focusable content (e.g., buttons or input fields), it must be keyboard accessible. Users relying on keyboards need to interact with the frame’s content, so it’s essential to ensure frames are not removed from the tab order unless explicitly intended.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

When an iframe with interactive content is removed from the tab order, keyboard users can see the embedded content but cannot reach it. This creates a visual promise of interactivity that keyboard users cannot fulfill.

How to Fix

Ensure the Frame Is Focusable If It Contains Interactive Elements: Frames containing interactive content must have a tabindex=”0″ or higher to make the frame focusable by keyboard users.

Use tabindex=”-1″ Only for Non-interactive Frames: If the frame contains no interactive content, you can use tabindex=”-1″ to exclude it from the focus order.

Provide Descriptive title Attributes for Frames: Add a meaningful title to each frame so that screen readers can accurately describe the frame’s content or purpose.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Frame with interactive content removed from tab order -->
<iframe
  src="chat-widget.html"
  tabindex="-1"
  title="Chat">
</iframe>

Copy

Correct Markup Solutions:

Code example

<!-- Frame is focusable so keyboard users can reach its content -->
<iframe
  src="chat-widget.html"
  title="Customer support chat">
</iframe>

Copy

Correct Markup Solutions:

Code example

<!-- If frame must be hidden from keyboard, hide content too -->
<iframe
  src="chat-widget.html"
  tabindex="-1"
  aria-hidden="true"
  title="Chat"
  style="display:none">
</iframe>

Copy

Common Mistakes to Avoid

Using tabindex=”-1″ on iframes that contain buttons, links, or form fields.
Not testing keyboard navigation into and out of embedded frames.
Hiding frames from the tab order without also hiding their visual content.

Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.

Related WCAG Criteria

2.1.1: Keyboard