Why iframes need a title

How it works

An iframe is a window in the page in which another page loads: a YouTube video, a Google Maps map, a booking or newsletter form. To a screen reader it is a region of its own, announced as you move through the page.

Without a title this region is just called “frame” or named after an address. Someone who can't see the page then doesn't know whether the content is worth it or can be skipped. The title attribute gives the frame a name:

<iframe src="https://www.youtube-nocookie.com/embed/…"
        title="Video: how to sign up"></iframe>

WCAG 2.2 requires in success criterion 4.1.2 that the parts of a page have an accessible name. For frames, that is the title.

What matters

• A title that names the content. “Map to our office”, “Video: product tour”, “Form: book an appointment”. Not “iframe”, “embed” or the provider's name alone.
• Every visible frame. Small embeds such as a review widget count too. A frame hidden with hidden, display: none or aria-hidden="true" doesn't need one.
• Purely technical frames out of the tab order. Invisible frames for tracking or payment services are taken out of keyboard operation with tabindex="-1"; they are then not checked either.
• The content of the frame is a page of its own. The title makes the frame accessible, not what is in it. Whether the embedded form itself is accessible is up to the provider.

How to set it up

You usually copy the embed code from the service, for example via “Share · Embed” on YouTube or Google Maps. YouTube adds a title, often just the video title; check it and add what it is about if needed. Where the code has no title, add it yourself in the HTML block of your CMS. If embeds come from a plugin, or from a consent tool that loads them only after consent, its output has to carry the title; ask the provider or your agency for a setting.