Cadre en ligne
Un cadre en ligne (iframe en HTML) intègre une page web à l'intérieur d'une autre page. Vidéos YouTube, cartes Google Maps, widgets de réservation : tous utilisent des iframes. Pour l'accessibilité, chaque cadre en ligne doit porter un attribut title qui décrit son contenu, afin que les lecteurs d'écran puissent l'identifier.
Vous collez le code d'intégration d'une vidéo YouTube sur votre page. Un lecteur d'écran rencontre cet <iframe> et annonce : « cadre ». Rien d'autre. L'utilisateur ne sait pas s'il s'agit d'une vidéo, d'une carte ou d'une publicité.
#Pourquoi le title est obligatoire
L'élément <iframe> crée un contexte de navigation imbriqué : une page complète à l'intérieur de votre page. Les lecteurs d'écran listent les cadres de la page pour permettre à l'utilisateur de naviguer entre eux. Sans attribut title, chaque cadre s'affiche comme « cadre » ou « cadre sans titre » dans cette liste.
Le RGAA y consacre sa thématique 2 entière, avec deux critères :
- Critère 2.1 : chaque cadre a-t-il un titre ?
- Critère 2.2 : ce titre est-il pertinent ?
Côté WCAG, la technique H64 décrit exactement cette approche pour satisfaire le critère 2.4.1 (contournement de blocs) et le critère 4.1.2 (nom, rôle, valeur).
#Le code que les plateformes vous donnent
YouTube, Spotify, Google Maps fournissent des codes d'intégration. Le problème : ces codes omettent souvent le title, ou mettent un titre générique identique pour toutes les vidéos.
<!-- Ce que YouTube génère -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"></iframe>
<!-- Ce qu'il faut écrire -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Vidéo : présentation de l'audiodescription synchronisée"></iframe>Le title doit décrire le contenu spécifique du cadre, pas sa nature technique. « Carte de localisation de nos bureaux à Lyon » vaut mieux que « Google Maps ».
#Iframes techniques : les cacher proprement
Certains iframes ne contiennent aucun contenu visible : scripts de suivi, pixels de conversion. Les garder exposés aux technologies d'assistance crée du bruit inutile. La solution, documentée par Orange : masquer le cadre avec aria-hidden et empêcher le focus clavier d'y entrer.
<iframe src="tracker.html"
title="Cadre technique"
aria-hidden="true"
tabindex="-1"></iframe>#En résumé
Chaque <iframe> de votre page a besoin d'un attribut title qui décrit son contenu. Modifiez les codes d'intégration copiés-collés. Pour les iframes techniques invisibles, ajoutez aria-hidden="true" et tabindex="-1".