How to Make Iframes and Their Contents Accessible
Iframes can be accessible.
But it does require some guidelines to adhere to. Iframes embed content from other web pages. Therefore, the user needs to be informed of this content. I come across many inaccessible iframes in my accessibility audits, and that’s a shame, because they are easy to make accessible.
So, here are the two (plus one) guidelines for accessible iframes.
Guideline #1: Iframes must have an accurate and descriptive title attribute (title=””)
Users must be informed of the contents of the iframe.
Users who are blind use a screen reader to make sense of the page. These screen readers provide the option to navigate by iframe with shortcuts. But if an iframe has no title, the user gets no information.
Add meaningful and unique titles to iframes.
Guideline #2: The heading structure of the iframe must match the structure of the main page
An iframe is part of the main page.
Get Ron Zuidema’s stories in your inbox
Join Medium for free to get updates from this writer.
All the content of an iframe is embedded in the main page. This also means that the headings of the iframe will be part of the heading structure of the main page. A screen reader user also has the option to navigate by headings or to obtain a list of all headings. It’s therefore crucial that the total heading structure makes sense to the user.
Make sure the whole heading structure is logical.
Bonus Guideline: Hide the iframe if the content is to be ignored
Sometimes an iframe is better ignored.
For instance, one that only contains JavaScript that is not meaningful to the user or one that only contains decorative content. These are better hidden. You can hide those with display none, visibility hidden, or ARIA hidden true (which only hides it from screen reader users).
Hide the iframe if it doesn’t add anything useful to the page.
With a few guidelines, you can make your iframes accessible.
Your visitors will thank you for it.
