Iframe titles must be unique and descriptive
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.
If there is more than one iframe, the title must tell you which one is which.
Why this matters and how to fix it
Why this matters
Screen readers announce the iframe title when users navigate between frames. If multiple iframes share the same title, users cannot tell which one contains which content, making widgets, dashboards, analytics panels, or embedded tools confusing to navigate.
How to fix this issue
Give each iframe a short, descriptive, and unique title that explains the purpose of that specific frame. If a frame is decorative or invisible to users, set `title=""` and `aria-hidden="true"` so assistive technologies ignore it.
Developer guidance
This issue commonly appears in dashboards and multi-widget layouts. When iframes are generated dynamically, create titles based on context — for example, report name, data source, or section label. If using a shared Frame/Iframe component, enforce a required `title` prop and warn on duplicates during development.
Code examples
Incorrect Implementation
<iframe title="Widget"></iframe>
<iframe title="Widget"></iframe>Correct Implementation
<iframe title="Sales dashboard widget"></iframe>
<iframe title="Customer feedback widget"></iframe>Real-World Examples
Before
<iframe title="Dashboard widget"></iframe>
<iframe title="Dashboard widget"></iframe>After
<iframe title="Sales metrics dashboard widget"></iframe>
<iframe title="Customer satisfaction dashboard widget"></iframe>Manual testing
- 1. Turn on a screen reader and tab into each iframe.
- 2. Verify each frame is announced with a unique title describing its purpose.
- 3. Confirm no frame titles are repeated unless they represent the same function.
- 4. For decorative/background frames, verify `title=""` + `aria-hidden="true"`.
- 5. If dynamically generated, test with multiple instances to ensure uniqueness holds at runtime.
Trusted by organizations across Europe working toward WCAG and EAA conformance