Hiding technical iframe

Introduction

A technical iframe is 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).

Hide the 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>