Iframes and Embeds
Accessible names for embedded maps, videos, and calendars
An <iframe> embeds a separate web page inside the current one. Library websites commonly use iframes for Google Maps branch locations, LibraryCalendar event widgets, YouTube videos, and social media feeds. Because an iframe is a fully independent document, screen readers need a label to announce what it contains before a user decides whether to enter it.
The problem
Screen readers announce iframes by reading their title attribute. Two failure patterns are common:
- No title at all - the screen reader announces "frame" or reads the src URL, which is rarely useful.
- Identical titles across multiple iframes - when a page has several maps or videos that all share the same title (or no title), users cannot tell them apart.
Issue 1 - missing title
<!-- No title - screen reader announces "frame" or the src URL -->
<iframe src="https://maps.google.com/maps?q=Main+Branch"></iframe>Screen reader users navigating by frames - a common technique for jumping to a specific section of a page - hear only "frame" with no indication of what the iframe contains. They must enter it and read its contents to find out.
Issue 2 - identical titles
<!-- Identical titles across multiple embeds - indistinguishable -->
<iframe title="Google Map" src="https://maps.google.com/maps?q=Main+Branch"></iframe>
<iframe title="Google Map" src="https://maps.google.com/maps?q=West+Branch"></iframe>
<iframe title="Google Map" src="https://maps.google.com/maps?q=East+Branch"></iframe>Having a title is better than nothing, but if all iframes on a page share the same title, users still cannot distinguish between them. When navigating by frames, hearing "Google Map, Google Map, Google Map" provides no useful information about which map is which.
Best practice
Give every iframe a title attribute that describes its specific content. Treat it like an accessible name for the embedded document - concise, accurate, and unique on the page.
<iframe
title="Map: Main Branch at 123 Library Street"
src="https://maps.google.com/maps?q=Main+Branch">
</iframe>
<iframe
title="Map: West Branch at 456 Oak Avenue"
src="https://maps.google.com/maps?q=West+Branch">
</iframe>
<iframe
title="Map: East Branch at 789 Elm Road"
src="https://maps.google.com/maps?q=East+Branch">
</iframe>Each iframe is uniquely identifiable from its label alone. Users navigating by frames can immediately locate the specific map, video, or widget they need without having to enter each one.
Common embed types
| Embed type | Example title |
|---|---|
| Google Map - single location | Map: Main Branch location |
| Google Map - one of several | Map: West Branch at 456 Oak Avenue |
| YouTube video | Video: Summer Reading Program introduction |
| LibraryCalendar widget | Upcoming events calendar |
| Social media feed | Library Facebook feed |
| PDF viewer | Annual Report 2025 (PDF) |
Adding titles in a CMS
Most CMS embed fields accept raw HTML. When pasting embed code from Google Maps, YouTube, or a calendar widget, locate the <iframe> tag in the embed code and add or edit the title attribute before saving:
<!-- Original embed code from Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"></iframe>
<!-- Add the title attribute before saving -->
<iframe
title="Map: Main Branch at 123 Library Street"
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450">
</iframe>Some page builders and block editors abstract the embed behind a UI and do not expose the title attribute directly. In those cases, check whether a custom HTML block is available, or raise a support request with the CMS vendor.
WCAG criteria
title attribute provides that name.
A