Masquer les iframes 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 exécute un script pour pouvoir enregistrer les actions de l'utilisateur sur la page.

Globalement, les référentiels d'accessibilité nous demandent, pour les iframes, 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).

Notez cependant que pour les iframes purement techniques, l'objectif étant de les cacher aux utilisateurs et aux outils d'assistance, l'attribut title n'est pas requis dès lors qu'elle est correctement masquée.

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 exécutés.

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

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

De cette manière, l'iframe n'est ni visible, ni accessible au focus clavier, ni restituée aux lecteurs d'écran.