Issue #1 - iframe accessibility
Here it is, the first issue of the HTMHell newsletter. Starting today, I will send you an HTML tip or trick every two weeks. I will try to create a good mix of mails about accessibility, performance, and general best practices, ranging from beginner to advanced topics.
Enjoy!
Manuel
HTMHell Newsletter 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 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 in this thread on Twitter.
Resources
- Deque University - Be Sure to Provide Titles for Iframes
- Hush Sweet IFrame
- Know your ARIA: 'Hidden' vs 'None'
Read this issue in your browser or share it with others: www.htmhell.dev/tips/iframe-accessibility/