Iframe titles: how to label embedded maps, videos and forms

Updated 2026-10-24 · Altlark guides

An iframe embeds another page inside yours: a Google Map, a YouTube or Vimeo video, a booking widget, a payment form, a social feed. Screen readers announce iframes as frames and let users move into them. Without a title, all the user hears is "frame" (or sometimes the embedded page's file name or URL), and with several embeds on a page there's no way to tell them apart.

Which WCAG criterion applies

• 4.1.2 Name, Role, Value, Level A: user interface components, including frames, need a name that can be programmatically determined. The title attribute on the iframe is the standard way to give it one.

Bad vs fixed: a map

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"
        title="Map: Acme Bakery, 12 Main St, Leesburg" loading="lazy"></iframe>

A map embed is also a good place to put the address in plain text next to it, since maps are hard to use with a screen reader:

<p>Find us at 12 Main St, Leesburg, VA. <a href="https://maps.google.com/?q=12+Main+St+Leesburg">Open in Google Maps</a></p>

Bad vs fixed: a video

<iframe src="https://www.youtube.com/embed/abc123" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/abc123" allowfullscreen
        title="Video: how we install a tankless water heater (3 min)"></iframe>

YouTube's own copy-paste embed code includes title="YouTube video player". That technically passes the check, but it's the same for every video. Replace it with the actual video's subject.

Bad vs fixed: booking or contact widget

<iframe src="https://booking.example.com/acme"></iframe>

<iframe src="https://booking.example.com/acme" title="Book an appointment"></iframe>

The title only names the frame. The form inside still needs labels and buttons with names; that's the widget vendor's code, so test it yourself (see missing form labels) and ask the vendor about their accessibility support if it falls short.

Hidden and tracking iframes

Some scripts add invisible iframes for tracking or messaging. If the frame really is invisible and has no content for users, hide it from assistive technology:

<iframe src="https://tracker.example.com/pixel" title="" hidden></iframe>
<iframe src="https://tracker.example.com/pixel" aria-hidden="true" tabindex="-1" style="display:none"></iframe>

Altlark skips iframes that are hidden from assistive technology (hidden attribute, aria-hidden, or inline display:none), so these won't be flagged.

Writing good iframe titles

• Say what the frame contains or does: "Map of our location", "Video: kitchen remodel walkthrough", "Newsletter signup form".
• Make each title unique on the page.
• Keep it short; the user will hear it every time they reach the frame.
• Don't use the provider's generic default ("YouTube video player", "Google Maps").

Embeds added by page builders and CMS blocks

WordPress's block editor, Squarespace and Wix add iframes for you when you paste a video or map link. Some set a generic title, some none. If your scan flags them, many builders let you add custom HTML instead of the built-in block; you can then write the iframe tag with your own title. For WordPress, some themes and plugins filter oEmbed output to add titles.

What Altlark checks exactly

Altlark checks every <iframe> in the server HTML that isn't hidden from assistive technology. It has a name if it has a non-empty title, aria-label or aria-labelledby. Otherwise it's reported as "Iframe with no title" (an error), with a selector and snippet so you can see the src.

Limits

Altlark doesn't look inside the frame. Whatever is embedded (a form, a video player, a chat window) has its own accessibility, and it needs testing separately. Also, iframes injected by JavaScript after the page loads (common for chat widgets and some booking tools) won't appear in a static scan.

Testing it yourself

Right-click the embed, choose Inspect, and find the <iframe> element in dev tools; the Accessibility pane will show its computed name. Then try it with a screen reader: in NVDA or JAWS, press M to jump between frames, or open the frames list. Each frame should be announced with a name that tells you what's inside, and two embeds on the same page should sound different. Tab into the frame and check you can use whatever is inside it and get back out with the keyboard. If the embedded tool traps focus, or its buttons and fields have no names, raise it with the vendor and offer a text alternative (an address, a phone number, a direct link) next to the embed.

Checklist

1. Run the free scan on pages with maps, videos and booking widgets.
2. Add a specific, unique title to each visible iframe.
3. Hide invisible tracking frames from assistive technology.
4. Put key information (address, hours, phone) in text next to map embeds.
5. Re-scan, then tab into each embed to check it's usable.