Issue #1 - 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
src attribute, which makes it hard or impossible for users to understand the purpose of the
<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.
Did you enjoy this tip?
Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.