Masquer les iframe techniques de manière accessible

Introduction

On entend par iframe technique une iframe qui a un rôle purement technique mais qui n'est pas visible aux utilisateurs. Par exemple une iframe qui execute un script pour compter le nombre de visiteurs d'un site.

Hors, 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 sur l'iframe. Les scripts contenus dans l'iframe seront 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>