iframe in an accessible way
iframe with only a technical role and invisible to users.For example, an
iframe that executes a script to collect the user actions on the page.
So, the accessibility repositories ask us to indicate in the
title attribute the content that will be present in the
iframe, information that will be accessible to the assistive tools (a screen reader will vocalize the
title attribute of an
iframe to all users
The solution for hiding the
iframe, including help tools users, is to add a
aria-hidden='true' attribute on the
iframe. The scripts contained in the
iframe will always be executed.
In addition, you can add a
tabindex attribute to prevent the focus from moving in the
iframe. So users who navigate using the keyboard will not get lost inside it.
<iframe title="technical content" aria-hidden="true" tabindex="-1" src="http://www.orange.com/"></iframe>