a11y/iframe-title

Why

Screen readers announce an iframe by its title. Without one, people hear "frame" and must enter it to find out whether it is a video, a map or an advert, often on every page.

Fix

Add title with a short description of the content: title="Product video: setting up sync", title="Card payment form". Embeds from component libraries usually accept a title prop; pass it. Hide purely technical frames with hidden or aria-hidden="true" and tabindex="-1".

Examples

<!-- bad -->
<iframe src="https://www.youtube-nocookie.com/embed/abc123"></iframe>
<!-- good -->
<iframe src="https://www.youtube-nocookie.com/embed/abc123" title="Video: setting up sync in two minutes"></iframe>

Sources

• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value
• WCAG 2.2 Technique H64, using the title attribute of the iframe element

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/iframe-title