People navigating with assistive technology such as a screen reader rely on the title attribute of an iframe to understand its content. The title's value should concisely describe the embedded content:
<iframe
title="Wikipedia page for HTML element"
src="https://en.wikipedia.org/wiki/HTML_element"></iframe>
Without this title, screen readers will instead give information like “frame,” “JavaScript,” the filename, or the URL. In most cases, this information won’t be very helpful. People have to navigate into the iframe to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if embeds contain interactive content like a video or audio content.
It is a Web Content Accessibility Guidelines (WCAG) 2.2 Success Criteria that an iframe should have an accessible name i.e. have a title. The best practice is for each title to be unique and descriptive.
YouTube gives an embed snippet with the title attribute with a value of 'YouTube Video Player'. Every single YouTube video will be announced as 'YouTube Video Player'! 🤨
Codepen's "HTML (recommended)" snippet contains a script that injects an iframe into the page. The iframe produced has a title attribute with a value of 'CodePen Embed'. Every single codepen will be announced as 'CodePen Embed'!
I informed Codepen who will fix the issue.
I suspect that most auditing tools don't identify these titles as an issue. For example, Lighthouse reports an accessibility issue if an iframe is missing a title. However it does not report an issue if multiple iframes on the same page have the same title. I think it would be helpful if tools picked this up, it would draw attention to embeds that don't have descriptive titles.
In any case, when you are including embeds in your website, inspect the title. Aim to have a descriptive, unique title for every iframe on your website.
Written by Rob O'Leary
Subscribe to web feed for the latest articles.
© Rob OLeary 2024
Top comments (4)
Your alt attribute for the codepen screenshot reads:
I think you need to change "YouTube" to "Codepen" - looks like a copy-paste mistake :)
Thanks, fixed!
Hi Rob, this is a great reminder. Thanks!