WebsightWho it affects
Someone using a screen reader on the village hall's contact page hears frame, frame, frame, and has to enter each one to find out which is the map and which is the booking form.
Someone who jumps between frames with a screen reader's frame list sees three entries all called frame.
Someone who has blocked third-party content sees a grey box and no clue what was meant to be there.
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<iframe src="https://maps.example/embed?q=village+hall" width="400" height="250"></iframe>Announced: frame, maps.example/embed. A screen reader user has to go in to find out it is a map.
<iframe src="https://maps.example/embed?q=village+hall" width="400" height="250" title="Map showing the village hall on Church Lane"></iframe>Announced: frame, Map showing the village hall on Church Lane.
Test it by hand in two minutes
- In the Elements panel search for <iframe. Each one should have a title attribute with real words in it.
- With a screen reader, Tab to each frame or open its frame list (the VoiceOver rotor, or NVDA's elements list). Each name should say what is inside.
- Check embedded players and forms you did not write: YouTube, Google Maps, Stripe. Most let you add a title to the embed code.
- Read the titles together. If two say the same thing, see frame-title-unique.
The fix
<iframe src="https://maps.example/embed?q=village+hall"></iframe><iframe src="https://maps.example/embed?q=village+hall" title="Map showing the village hall on Church Lane"></iframe>Say what the frame contains, not that it is a frame. Map of the hall is better than Embedded iframe.
Video embed
<iframe src="https://video.example/embed/8a2"></iframe><iframe src="https://video.example/embed/8a2" title="Video: setting up the hall for a wedding"></iframe>The provider's embed code usually has an empty or generic title. Edit it.
Frame nobody should read
<iframe src="/analytics.html"></iframe><iframe src="/analytics.html" title="Analytics" hidden></iframe>Frames with nothing for a person in them can be hidden from everyone. Hidden frames are not flagged.
Common mistakes
- title="iframe" or title="embed".
- Relying on the title of the document inside the frame; some screen readers use it, but only once the frame has loaded, and not all do.
- Using aria-label without a title. It works for screen readers, but title is simpler and also gives a tooltip.
- Leaving the provider's default, such as YouTube video player, on every video.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:
- 4.1.2 Name, Role, Value (level A). Official W3C text.
The scanner checks each iframe and frame for an accessible name: a title attribute, aria-label or aria-labelledby. It cannot tell whether the words describe what is inside. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
frame-title-unique
If a page has several frames, each needs its own title.
A
Frames with controls inside must not have tabindex=-1
frame-focusable-content
An iframe with tabindex="-1" is taken out of the Tab order, and so is everything inside it.
A
Every page needs a title
document-title
The title element in the head is the first thing a screen reader says when a page loads, the text on the browser tab, the name of the bookmark, and the headline in search results.
A
Videos must have captions
video-caption
A video element with speech or meaningful sound needs captions: text that appears on screen in time with the audio.