Why are iFrames challenging for Accessibility?
There’s barely a professional website without a few iFrames. Let’s learn more about iFrames and how they fit into the world of accessibility.
What are iFrames, exactly?
iFrames (or inline frames) are HTML elements that load content of another website or app on your website. Usually, iFrames are used for interactive content, advertisements, embedded videos, analytics tracking, etc.
For those that remember, they are the HTML5 version of the old <frame> elements that were popular in the 90s, which are now deprecated. Oh, how they’ve evolved!
If that explanation is a bit confusing, I will try to give you a mental image. Imagine you leave a window open in your house. People can drop items in your home through that open window. That is like our friend, the iFrame.
Because an iFrame allows content from another service on your website, it’s a good idea to connect with your Security and Compliance team. That team will determine if your vendor’s content is safe to use.
Identify your iFrame
Provide an accessible name to your iFrame by giving your iFrame a title. Your title attribute satisfies the Success Criterion 4.1.2 Name, Role, Value and is specifically mentioned in W3C’s article titled, “Iframe element has non-empty accessible name”. The title you add should be succinct (something as simple as “advertisement” is fine) to inform your customer of its purpose.
Sample code
<iframe title="your description" ...>Each screen reader will respond to iFrames in a different way. Some screen readers will announce there’s an iframe present, while others will dismiss them. Depending on the screen reader and the browser being used, they may support keyboard navigation, which means that the screen reader can TAB to the inline frame.
You can test this for yourself:
- Internet Explorer and Firefox TAB stop
- Chrome and Safari will pass by them
iFrames with content for your customers
Your iFrame’s content should be as inclusive as your website. However, because the content is not on your website, you won’t be able to use an accessibility tester to check for any issues.
- Scrolling: Do not disable your iFrames’ scrolling by using
scrolling="no", set your scrolling value toscrolling="auto" - Internal content: Your iFrame’s content should follow the same guidelines mentioned in Your WCAG checklist – from 2.0 to 2.2.
iFrames without content
Sometimes an iFrame is not meant for your customers. For example, advertisements or analytics tracking. They do not provide any information that your customer will care about.
Techniques you can use
Do (any one of these will do)
- Add a title attribute
- Use inline style
display:noneto hide it from your customers - Use the attribute
aria-hidden="true"to hide it from screen readers only - Remove it from the TAB order by adding
tabindex="-1"
Don’t
- Remove title attribute
- Leave the title attribute empty
title="" - Add a space to the title attribute
title=" " - Use alt attribute
alt="some text"oraria-label="some text"instead of a title attribute - Use
visibility:hidden; it may be reverted by its descendants
Third-party iFrames
There are many services that create iFrames. Sometimes the service’s code creates them without a title. And, because it’s not your code, you can’t edit it. This is why some iFrames are tricky.
Now, what do I do?
There are a few things you can do to deal with this problem.
- Contact the 3rd party provider: Many companies realize why accessibility is important, so you probably will not be the only one asking for a title attribute. Power to the people!
- Reconsider if you should use this service: If a provider is preventing you from providing a great service to your customer, perhaps it’s time to rethink the service they provide. Another provider may fill your needs without excluding some of your customers.
- Own up to the issue in your accessibility statement: There are some accessibility statements that have a “Known exceptions” section. The idea is to tell your customers what accessibility issues they may find. Consider this approach a last resort. Adding an exception will not fix the issue that adds confusion to your customers.
The below video features Frank Constanza of Seinfield screaming, “I got a lot of problems with you people! And now you’re going to hear about it!
Conclusion
The video below features Trevor Noah of The Daily Show saying, “Problem solved”.
Most websites contain at least one iFrame. They can be a little problematic, but there are steps you can take to reduce the confusion for anyone visiting your website.
I hope this guide has helped you navigate your way through to inclusive iFrames.
