Iframes with focusable content must be keyboard reachable
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.
Overview
Why this matters
If keyboard focus cannot enter and operate embedded content, users lose access to that functionality entirely.
How to fix this issue
Ensure interactive iframes are keyboard reachable, include a descriptive title, and support full focus traversal in and out of embedded controls. Avoid removing frame focus with `tabindex=-1` when interaction is required.
Developer Guidance
Treat iframe boundaries as explicit focus transitions. Verify host-page tab order before the frame, internal tabbable sequence inside the frame, and a predictable exit path back to host controls. For third-party embeds, include keyboard operability requirements in vendor acceptance tests and block release if focus cannot enter or exit reliably.
Code Examples
Incorrect Implementation
<iframe tabindex="-1" src="/widget.html"></iframe>Correct Implementation
<iframe src="/widget.html" title="Embedded chat widget"></iframe>Real-World Implementation
Before
<section class="insights">
<iframe tabindex="-1" src="/embedded-report"></iframe>
</section>
<!-- Report is visible but unreachable by keyboard -->After
<section class="insights">
<iframe src="/embedded-report" title="Quarterly revenue report"></iframe>
</section>
<!-- Focus can enter report, traverse controls, and return to host page -->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. Navigate with keyboard only and confirm focus can enter the iframe.
- 2. Verify all essential controls inside the iframe are tabbable and operable.
- 3. Confirm Shift+Tab and Tab allow clean exit and re-entry paths.
- 4. With screen reader enabled, verify frame title is announced clearly.
- 5. Test embedded workflow completion end-to-end without mouse input.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance