RGAA Lab

Composants accessibles

Les cadres

Un cadre sans titre est annoncé « cadre », et rien de plus : personne ne sait s'il faut y entrer. Le titre doit dire ce que le cadre contient — et « iframe » n'est pas un titre. Démo, code, critères RGAA.

3 critères RGAA en jeu

Essayez-les

Le troisième cadre est un cadre technique : il n’affiche rien. En production il mesure l’audience et tient dans un pixel ; il est agrandi ici pour qu’on voie qu’il est bien là.

La liste ci-dessous est lue dans le document dès l’ouverture de la page.

La liste sous les cadres est lue dans le document, pas écrite d’avance : chaque ligne vient de l’attribut title du cadre réel. Posez le titre par défaut du gestionnaire de contenu, et regardez les deux cadres devenir indiscernables. Puis remettez le cadre technique dans la restitution : il s’ajoute à la liste, sans rien avoir à y dire.

Cette démo existe aussi en page autonome.

L’erreur courante

Le cadre arrive par un copier-coller, et l’attribut qui compte n’y est pas.

<!-- À ne pas faire : le code d'intégration tel qu'on le reçoit -->
<iframe src="https://www.exemple.fr/embed/AbCdEf" width="560" height="315"></iframe>

Ce cadre est annoncé « cadre », et rien d’autre. L’utilisateur qui navigue de cadre en cadre n’a aucun moyen de savoir ce qu’il y a derrière : il doit entrer pour voir, ressortir, recommencer au suivant. Le coût n’est pas théorique — un article portant trois vidéos et une carte fait quatre portes sans étiquette.

La correction évidente est souvent pire, parce qu’elle passe inaperçue :

<!-- À ne pas faire non plus : le gestionnaire de contenu titre tout pareil -->
<iframe src="…/AbCdEf" title="Contenu intégré"></iframe>
<iframe src="…/GhIjKl" title="Contenu intégré"></iframe>
<iframe src="…/carte"  title="Contenu intégré"></iframe>

Le critère 2.1 est satisfait — l’attribut est là. Le 2.2 ne l’est pas : la liste des cadres donne trois fois la même chose, et l’utilisateur en est exactement au même point qu’avec trois cadres sans titre.

Les variantes qui coûtent la même chose :

  • title=" " — une espace. Le nom accessible est vide : c’est un cadre sans titre, avec un attribut en plus.
  • aria-label à la place de title. Le nom accessible est correct, et bien des outils automatiques passent au vert ; le test 2.1.1 demande l’attribut title, et le critère échoue quand même. C’est le seul endroit du référentiel où un outil qui lit le nom accessible se trompe en votre faveur.
  • Le <title> du document embarqué. Il existe, il est parfois excellent, et il ne franchit pas la frontière : le lecteur d’écran annonce le cadre avant d’y entrer, avec le title du cadre.

Le code, pas à pas

1. Un title sur chaque cadre

<iframe
	src="https://www.exemple.fr/embed/AbCdEf"
	title="Vidéo — prendre une capture dans l'extension"
></iframe>

Un attribut, sur la balise <iframe> — donc de votre côté de la frontière, quel que soit le contenu embarqué et qui le sert. C’est ce qui rend ce critère réparable même quand on ne maîtrise rien de ce qu’il y a dedans.

« Chaque cadre » veut dire chaque cadre. Ceux qu’un script insère après le chargement — lecteur vidéo différé, widget de chat, bandeau de consentement, balise de régie — n’apparaissent pas dans le code source servi. Vérifiez sur la page rendue, dans l’inspecteur, pas dans le view-source.

2. Un titre qui dit le contenu

Le titre de cadre est ce qu’on lit hors de tout contexte, dans une liste de cadres. Il doit donc suffire, seul, à décider d’entrer ou de passer.

<!-- Ce que voit l'utilisateur dans la liste -->
title="Vidéo — prendre une capture dans l'extension"   <!-- il sait -->
title="YouTube video player"                            <!-- à peine -->
title="iframe"                                          <!-- rien -->

Trois façons de rater ce titre, toutes fréquentes : nommer la technologie (« lecteur Flash », « cadre Google Maps ») plutôt que le contenu ; poser un identifiant technique ou un nom de fichier ; et surtout répéter le même titre sur plusieurs cadres. Deux vidéos différentes titrées pareil ne distinguent rien.

3. Les cadres techniques

Un cadre qui n’affiche rien — mesure d’audience, traitement applicatif d’un réseau social, balise publicitaire — pose une vraie question : que titrer, quand il n’y a rien à décrire ? Le glossaire du référentiel y répond lui-même, à l’entrée « titre de cadre » :

Si ces cadres sont dépourvus de titre de cadre fournis par le service distant, ou si les titres de cadres sont jugés non pertinents, des mentions génériques peuvent être utilisées, par exemple title="contenus techniques Facebook".

Note 2 : Si cela ne gêne pas le fonctionnement de ce type de cadre, il est possible de les rendre indisponibles aux technologies d’assistance en utilisant l’attribut WAI-ARIA aria-hidden="true". Dans ce cas le critère 2.1 et le critère 2.2 seront non applicables.

Deux routes, donc, et la première est la moins risquée : une mention générique coûte un attribut et ne dépend de rien.

Si vous prenez la seconde, deux précautions. aria-hidden ne se pose que sur un cadre qui n’affiche rien : appliqué à un cadre porteur de contenu, il cache aux uns ce que les autres voient, et c’est le critère 10.8 qui le relève.

<iframe
	src="https://mesure.exemple.fr/pixel"
	title="Contenus techniques — mesure d'audience"
	aria-hidden="true"
	tabindex="-1"
></iframe>

Le tabindex="-1" accompagne le aria-hidden : selon le navigateur, la tabulation s’arrête sur le cadre lui-même. Un élément qui prend le focus tout en étant retiré de la restitution est le pire des deux mondes — on y arrive, et rien n’est annoncé.

4. Ce qu’il y a dedans ne vous appartient pas

Le titre est votre part du travail ; le document embarqué est celle du service distant, et vous n’en changerez ni le contraste, ni les intitulés de boutons, ni l’ordre de tabulation. Deux conséquences pratiques :

  • Le choix du service est une décision d’accessibilité. Un lecteur vidéo dont les contrôles ne sont pas atteignables au clavier rend la page inutilisable sur cette portion, et aucun title n’y changera rien.
  • Un cadre défilant doit rester atteignable au clavier pour être lu. Les navigateurs y pourvoient d’eux-mêmes en rendant le cadre focalisable — raison de plus pour ne pas lui poser un tabindex="-1" par réflexe.

5. Avez-vous besoin d’un cadre ?

Un cadre découpe la page en documents, multiplie les portes et ajoute un contenu que vous ne contrôlez pas. Trois cas où l’on s’en passe : une vidéo peut se servir en <video> sur votre propre domaine ; une carte peut se réduire à une image et à une adresse en texte, doublée d’un lien vers le service cartographique ; un formulaire de tiers propose parfois une intégration en HTML plutôt qu’en cadre. Chaque cadre retiré est une porte de moins à étiqueter.

Au clavier

Un cadre ne s’actionne pas : il se traverse. Rien à écrire, tout à ne pas casser.

ToucheEffet
TabEntre dans le cadre. Selon le navigateur, le focus s’arrête d’abord sur le cadre lui-même, puis passe au premier élément focalisable du document embarqué.
Maj + TabRemonte dans le cadre puis en ressort par le haut, vers l’élément qui le précède dans la page.
FlèchesFont défiler le contenu du cadre quand celui-ci a le focus, et rien d’autre : les flèches n’ont pas de rôle propre aux cadres.
Liste des cadres (JAWS : Insert + F9)Ouvre la liste des cadres de la page. C’est là que le titre est lu seul, sans le contexte qui l’entoure à l’écran.

Un cadre qui retient le focus — une modale ouverte dans le document embarqué, par exemple — est un défaut de ce document, pas du cadre. Vous ne le corrigerez pas depuis la page qui l’accueille : c’est un critère de choix du service.

Ce que le lecteur d’écran restitue

Au passage du cadre : sa nature et son nom — « cadre, Vidéo — prendre une capture dans l’extension ». L’ordre et le mot exact varient d’un lecteur à l’autre, la sortie du cadre est parfois annoncée aussi ; les informations, elles, ne varient pas.

Si vous n’entendez que « cadre », l’attribut title manque ou il est vide. Si vous entendez deux fois le même nom en parcourant la page, deux cadres partagent un titre par défaut. Et si vous ne percevez rien du tout à l’endroit où un cadre existe, il est retiré de la restitution — vérifiez que c’est voulu, et qu’il n’affiche effectivement rien.

Checklist

  • Un attribut title sur chaque <iframe>, y compris ceux injectés par un script.
  • Un titre qui dit le contenu, pas la technologie ni le fournisseur.
  • Des titres distincts dès que la page compte plusieurs cadres.
  • Ni aria-label, ni le <title> du document embarqué, à la place de title.
  • Cadres techniques : mention générique, ou aria-hidden et tabindex="-1" s’ils n’affichent rien.
  • Vérifier sur la page rendue, jamais sur le code source servi.

Les critères RGAA en jeu

  • Critère 2.1 — Titre de cadre

    Le test ne demande qu'une chose, et il la demande pour chaque cadre : un attribut title. Les cadres injectés par un script — vidéo, carte, chat, bandeau de consentement — sont ceux qu'on oublie, parce qu'ils ne figurent pas dans le code source servi.

  • Critère 2.2 — Pertinence du titre de cadre

    Un titre présent mais creux satisfait le 2.1 et laisse l'utilisateur aussi démuni : « iframe », « contenu intégré », ou le même titre par défaut recopié sur les six cadres de la page.

  • Critère 10.8 — Contenus cachés ignorés

    Retirer un cadre de la restitution avec aria-hidden ne se justifie que s'il n'affiche rien. Appliqué à un cadre qui montre quelque chose, le raccourci prive une partie des utilisateurs de ce que les autres voient.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources