Accessibilité des cadres avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Les balises <iframe> ou <frame> peuvent accueillir du contenu difficilement accessible aux personnes en situation, et plus particulièrement aux internautes utilisant un lecteur d’écran.
L’accessibilité des cadres est la deuxième des 13 thématiques abordées par le référentiel RGAA. Elle détermine les conditions à remplir pour rendre les contenus des balises <iframe> ou <frame> accessibles aux personnes malvoyantes.
1. Chaque cadre a-t-il un titre de cadre ?
Une balise <iframe> (Inline Frame) est un élément HTML utilisé pour imbriquer le contenu d’une autre page HTML dans le document en cours, créant ainsi une fenêtre de navigation distincte à l’intérieur de la page web principale. Une iframe peut par exemple être utilisée pour afficher une carte interactive au sein d’une page ou une vidéo. Le code d’intégration d’une vidéo YouTube repose par exemple sur une balise <iframe>.
La balise <frame> était quant à elle utilisée dans un élément plus large, appelée <frameset>. Bien qu’elle soit aujourd’hui obsolète, elle continue à être évoquée par le RGAA.
Les balises <iframe> et <iframe> présentent un enjeu particulier en terme d’accessibilité : l’utilisateur d’un lecteur d’écran ne peut pas avoir accès par défaut à une information sur la nature du contenu présent dans l’iframe ou dans la frame. Le référentiel RGAA préconise l’utilisation d’un attribut Title pour renseigner l’utilisateur.
Vous affichez le code source et vous vérifiez tout simplement la présence de l’attribut title dans la balise <iframe>.
Voici le code HTML pour intégrer une vidéo YouTube de la chaîne Google Workspace. Vous pouvez constater la présence d’un attribut title que j’ai souligné pour plus de lisibilité.
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/NUKY6_SM8mc?si=RBY_JoZkbvGk9Uvs” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
Cette <iframe> répond donc à la première condition de réussite du référentiel général pour l’amélioration de l’accessibilité.
Astuces et tutoriels sur l'accessibilité Web
2. Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?
Avoir un attribut titre, c’est bien. Mais avoir un attribut titre bien renseigné, c’est mieux ! L’intitulé de l’attribut titre doit en effet décrire avec précision et concision le contenu de l’image.
Je vous présentais en exemple, un peu plus haut, le code source d’une balise <iframe> de YouTube :
Vous affichez le code source et vous vérifiez tout simplement la présence de l’attribut title dans la balise <iframe>
Voici le code HTML pour intégrer une vidéo YouTube de la chaîne Google Workspace. Vous pouvez constater la présence d’un attribut title que j’ai souligné pour plus de lisibilité.
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/NUKY6_SM8mc?si=RBY_JoZkbvGk9Uvs” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
Cette <iframe> présente bien un attribut title non vide. C’est bien, mais remplit-on réellement tous les critères d’accessibilité du RGAA pour les cadres ? Je suis réservé sur l’intitulé : YouTube video player est trop générique, et ne renseigne pas sur la nature de la vidéo. Reprendre le titre de la vidéo aurait été plus conforme aux règles du WCAG et du RGAA, avec un texte du type “YouTube video player: Nebraska – Morgan Ranch: Gemini in Gmail”