WebsightWho it affects
Someone using a screen reader on the brass band's media page opens the frame list and sees YouTube video player six times.
Someone using voice control says click Video and is asked which of four identical names they meant.
Someone with a cognitive disability cannot work out which frame to skip and which to read.
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://video.example/embed/1" title="YouTube video player"></iframe>
<iframe src="https://video.example/embed/2" title="YouTube video player"></iframe>Two frames, one name. A frame list shows two identical entries.
<iframe src="https://video.example/embed/1" title="Video: Monday rehearsal, March"></iframe>
<iframe src="https://video.example/embed/2" title="Video: Christmas concert in the square"></iframe>Each frame is announced with what it shows.
Test it by hand in two minutes
- In the Elements panel search for <iframe and list the title values. Any repeats fail.
- With a screen reader, open the frame list and read the names together.
- Pages built from a template (a gallery, a list of events) are the usual cause. Check the title is built from each item's name, not a fixed string.
The fix
<iframe src="https://video.example/embed/1" title="Video"></iframe>
<iframe src="https://video.example/embed/2" title="Video"></iframe><iframe src="https://video.example/embed/1" title="Video: Monday rehearsal, March"></iframe>
<iframe src="https://video.example/embed/2" title="Video: Christmas concert in the square"></iframe>Put the thing that differs in the title. The frame's title attribute, not the page title inside it, is what this check reads.
Template loop
<iframe src="{{url}}" title="Video"></iframe><iframe src="{{url}}" title="Video: {{event_name}}"></iframe>Build the title from data you already have.
Common mistakes
- Numbering them Video 1, Video 2. Unique, but says nothing.
- Making the titles differ only by spacing or capital letters.
- Changing the document title inside the frame and leaving the title attribute the same.
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 compares the title attributes of all iframe and frame elements on the page and reports any value used more than once. It does not compare aria-label values, and it cannot tell whether the distinct titles mean anything. 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
An iframe is a window onto another page: a map, a video, a booking form, a payment field.
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
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
ids used by ARIA and labels must be unique
duplicate-id-aria
aria-labelledby, aria-describedby, aria-controls and the label for attribute all work by id.