Masquer les iframe techniques

Introduction

On entend par iframe technique une iframe qui a un rôle purement technique et qui n'est pas visible aux utilisateurs. Par exemple, une iframe qui execute un script pour pouvoir enregistrer les actions de l'utilisateur sur la page.

Or, les référentiels d'accessibilité nous demandent d'indiquer dans l'attribut title le contenu qui sera présent dans l'iframe, information qui sera accessible aux outils d'assistance (un lecteur d'écran vocalisera l'attribut title d'une iframe).

Cacher l'iframe à tous les utilisateurs

La solution pour cacher l'iframe, y compris aux utilisateurs d'outils d'assistance, est d'ajouter un attribut aria-hidden='true' sur l'iframe. Les scripts contenus dans l'iframe seront toujours executés.

Par ailleurs, on peut ajouter un attribut tabindex pour interdire au focus de se déplacer dans l'iframe. Ainsi les utilisateurs qui naviguent à l'aide du clavier, n'iront pas se perdre à l'intérieur de cette dernière.

<iframe title="contenu technique" aria-hidden="true" tabindex="-1" src="http://www.orange.com/"></iframe>