Frames and iframes must have descriptive 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 frame or iframe must have a unique, descriptive title for clear screen reader context.
Why this matters and how to fix it
Why this matters
Screen readers announce the title of a frame when focus enters it. If the title is missing or vague, users cannot understand what the embedded content is for (e.g., navigation, support chat, reports dashboard). This creates confusion and makes navigating between frames harder.
How to fix this issue
Add a meaningful `title` attribute to each <iframe> or <frame> that describes the purpose of the embedded content. Do not use placeholder names (e.g., 'iframe1', 'content frame'). Titles should describe function, not file names or URLs.
Developer guidance
This issue is common when embedding analytics dashboards, third-party forms, video players, chat widgets, or micro-frontends. Ensure titles are set dynamically when embedding external apps. Include a review step during code review or QA to confirm title wording is clear and unique.
Code examples
Incorrect Implementation
<iframe src="/reports.html"></iframe>Correct Implementation
<iframe src="/reports.html" title="Quarterly sales reports"></iframe>Real-World Examples
Before
<iframe src="https://support-chat.example.com/widget"></iframe>
<!-- Screen reader announces: 'frame' with no context → user does not know it is a support chat tool -->After
<iframe src="https://support-chat.example.com/widget" title="Customer support live chat"></iframe>
<!-- Screen reader announces: 'Customer support live chat, frame' → clear purpose -->Manual testing
- 1. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
- 2. Press Tab or use screen reader navigation to move focus into the iframe.
- 3. Listen to the announcement.
- • Expected: The screen reader announces a meaningful title, e.g., 'Quarterly sales reports, frame'.
- • Failure: It announces 'frame', 'iframe', a file path, or nothing at all.
- 4. If there are multiple iframes on the page, repeat navigation to ensure each has a unique descriptive title.
- 5. If embedding third-party widgets, verify titles are not overridden or removed during load.
Trusted by organizations across Europe working toward WCAG and EAA conformance