Iframes must have descriptive and meaningful titles
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.
Every iframe must have a clear, descriptive title or be hidden from assistive technology.
Why this matters and how to fix it
Why this matters
Screen readers announce the iframe title when users move focus into it. If the title is missing or generic, users cannot understand what the embedded content is for—such as navigation, chat, analytics, or video playback. This is especially disorienting when multiple iframes exist on the same page.
How to fix this issue
Add a concise, descriptive `title` attribute to every iframe that communicates its purpose (e.g., "Live chat support", "Customer analytics dashboard", "Store locator map"). If an iframe is purely decorative or used for background operations, set `title=""` and `aria-hidden="true"` so screen readers skip it.
Developer guidance
This issue appears often in dashboards and embedded third-party widgets. Make descriptive iframe titles a required code review step. For iframes generated by components, enforce a `title` prop. Avoid non-descriptive values like `widget`, `content`, `frame`, or repeating the file name.
Code examples
Incorrect Implementation
<iframe src="/widget.html"></iframe>Correct Implementation
<iframe src="/widget.html" title="Sales dashboard widget"></iframe>Real-World Examples
Before
<iframe src="https://maps.google.com/embed"></iframe>
<!-- Screen reader announces: 'frame' → unclear purpose -->After
<iframe src="https://maps.google.com/embed" title="Store locations map"></iframe>
<!-- Screen reader announces: 'Store locations map, frame' → clear purpose -->Manual testing
- 1. Turn on a screen reader (NVDA, VoiceOver, JAWS, or TalkBack).
- 2. Use Tab or screen reader navigation to move focus into the iframe.
- • Expected announcement: '[Meaningful title], frame'.
- • Failure: Screen reader announces only 'frame', a URL, or silence.
- 3. If there are multiple iframes on the page, move focus through each and confirm each one has a unique, descriptive title.
- 4. For invisible/background iframes (e.g., auth refreshers, tracking pixels):
- • Ensure `title=""` and `aria-hidden="true"` are applied.
- 5. Inspect the iframe in DevTools → Accessibility tree to verify the title is recognized and exposed.
Trusted by organizations across Europe working toward WCAG and EAA conformance