Warninga11y.iframe-title

Frames without a title

Why it matters

An <iframe> is a page inside your page: a map, a video, a booking form. A screen reader announces each one by its title and lets the visitor step into it or past it. With no title it says "frame", or reads out the address of the embed, and the only way to find out whether it is the map or an advert is to go in and listen.

The embed codes that YouTube and Google Maps hand out include a title these days; older ones, and most booking and payment widgets, don't.

Source: WCAG 2.2, 4.1.2 Name, Role, Value (Level A); technique H64.

How to fix it

Say what is in the frame:

<iframe src="https://www.google.com/maps/embed?…" title="Map: Flour & Co, 12 Call Lane, Leeds"></iframe>

A frame that does nothing a visitor should meet (a tracking frame) should be hidden from everyone: hidden or aria-hidden="true", and tabindex="-1".

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<iframe src="https://www.google.com/maps/embed?pb=1">

Warning1 frame has no title, so a screen reader can't say what is in it without going in: iframe.

fail-untitled
<iframe src="https://www.google.com/maps/embed?pb=1" title="Map: Flour &amp; Co, 12 Call Lane, Leeds">

PassedEvery frame has a title (1 frame).

pass-titled