Iframes with focusable content must be keyboard reachable

WCAG 2.1.1
Keyboard

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Focusable iframes must have a descriptive title and be reachable via keyboard.

Why this matters and how to fix it

Why this matters

Keyboard-only and screen reader users must be able to move focus into an iframe to interact with its content. If an iframe is removed from the tab order or has no accessible title, users may not be able to reach it at all or may not understand what it contains.

How to fix this issue

If an iframe contains interactive elements (links, forms, widgets), ensure it is included in the tab order (no tabindex="-1"). Give the iframe a meaningful title describing its purpose. For scrollable subregions, apply tabindex="0" to allow keyboard entry and use arrow/page keys to scroll.

Automated detection · Manual review recommended

Developer guidance

This issue commonly occurs when teams disable iframe focus to avoid accidental focus shifts during navigation. If an iframe is interactive, it must remain keyboard reachable. For custom components (e.g., embedded apps, editors, maps, dashboards), ensure iframe content has proper internal focus order and visible focus styles.

Code examples

Incorrect Implementation

<iframe tabindex="-1" src="/widget.html"></iframe>

Correct Implementation

<iframe src="/widget.html" title="Embedded chat widget"></iframe>

Real-World Examples

Before

<div class="dashboard">
  <!-- Embedded analytics widget looks visible, but can't be accessed by keyboard -->
  <iframe tabindex="-1" src="/reports/chart.html"></iframe>
</div>

After

<div class="dashboard">
  <iframe src="/reports/chart.html" title="Sales performance chart widget"></iframe>
</div>
<!-- Focus can now enter the widget, and its controls are keyboard operable -->

CSS Example (Guidance)

/* If iframe container is scrollable, make the container focusable */
.chart-container {
  max-height: 400px;
  overflow: auto;
}
.chart-container:focus {
  outline: 2px solid #005fcc;
}

Manual testing

  1. 1. Turn off your mouse. Use Tab to navigate the page.
  2. 2. When focus reaches the iframe, verify that the browser enters the iframe (you may need to press Tab again inside it).
  3. 3. Confirm that any controls inside the iframe (links, buttons, inputs) are reachable by Tab and Shift+Tab.
  4. 4. If the iframe or its container is scrollable, test scrolling using Arrow keys or Page Up/Down.
  5. 5. Turn on a screen reader and navigate to the iframe again.
  6. • Expected: The screen reader should announce the iframe's title (e.g., “Sales performance chart widget, frame”).
  7. • Failure: The screen reader announces 'frame' with no context, or focus cannot enter the iframe.
  8. 6. If the iframe contains another application (e.g., editor, map, dashboard), verify that focus can also exit the iframe cleanly with Shift+Tab.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance