iframe accessibility

iframes should be named, if they contain meaningful content. You can define an accessible name for an iframe using the title attribute. If it’s missing, screen readers might fall back to the value of the name or src attribute, which makes it hard or impossible for users to understand the purpose of the iframe.

<iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>

If you include an iframe that’s not visible to the user because it’s not meant to be interacted with, hide it from screen reader and keyboard users, too.

<iframe title="Intentionally hidden" aria-hidden="true" tabindex="-1" src="https://www.mythirdpartyscriptxy.com"></iframe>

You can find exemplary use cases for hidden iframes that run in the background in this thread on Twitter.

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.