RGAA Lab

Composants accessibles

Les médias non temporels

Le média non temporel est le contenu embarqué qu'on manipule : visionneuse, application, plan interactif. Le référentiel n'attend pas qu'on le décrive, mais qu'un lien ou un bouton adjacent mène à une alternative qui en fait autant.

4 critères RGAA en jeu

Essayez-le

Plan du rez-de-chaussée — Maison des associations

Mettre la page à l’épreuve

Le plan ne prend pas le focus : à la tabulation, vous arrivez directement sur le bouton qui le suit, et c’est lui qui ouvre l’alternative. Choisissez-y une salle aux flèches — le plan se met à jour, sans que vous l’ayez touché.

Appuyez ensuite sur « Relever ce que la page expose » : le plan n’expose aucun texte, l’alternative en expose plusieurs centaines de signes et porte quatre commandes — celles que vous venez d’atteindre au clavier. Le relevé les dénombre ; c’est votre clavier qui les valide. Cochez « simuler un plan qui ne s’affiche pas » — les chiffres ne bougent pas, la page perd son dessin et garde son information. Cochez la dernière case, qui glisse une légende entre le plan et le bouton : ce qui suit le plan dans le code n’est plus le bouton, et la condition d’adjacence tombe.

Cette démo existe aussi en page autonome.

L’erreur courante

Croire que le contenu de repli de l’objet est l’alternative.

<!-- À ne pas faire : l'alternative est enfermée dans le média -->
<object type="application/pdf" data="plan-rez-de-chaussee.pdf" width="560" height="230">
	<p>Plan du rez-de-chaussée : le hall, deux salles au fond, l'atelier à droite.</p>
</object>

Ce paragraphe ne s’affiche que si l’objet ne se charge pas. Quand il se charge — ce qui est le cas courant —, il disparaît pour tout le monde, y compris pour la personne dont le lecteur d’écran ne tire rien de la visionneuse. C’est exactement l’inverse du besoin : l’alternative s’efface au moment précis où elle servirait.

Le test 4.8.1 ne connaît que deux routes, et le repli n’en fait pas partie : un lien ou bouton adjacent vers une page contenant l’alternative, ou vers une alternative dans la page.

Trois variantes, plus discrètes :

  • L’alternative reléguée en bas de page. Le glossaire exige l’adjacence à l’écran et dans le code. Un lien en pied de page oblige à chercher, et rien ne dit à quoi il se rapporte quand on l’atteint.
  • Une alternative qui décrit au lieu de servir. « Carte interactive des agences » nomme le média ; elle ne dit ni où sont les agences, ni comment en choisir une. Le test 4.9.1 demande le même contenu et des fonctionnalités similaires.
  • Le média piloté à la molette et au glisser seulement. Zoom, déplacement, rotation : ces fonctions n’existent alors ni au clavier, ni pour un dispositif de pointage qui n’est pas une souris.

Le code, pas à pas

1. Est-ce vraiment un média non temporel ?

La définition du glossaire est limitative, et elle décide de tout ce qui suit :

Contenu qui ne se déroule pas dans le temps, consultable via un plugin (Flash, Java, Silverlight…) ou via les éléments svg et canvas ; par exemple, une carte interactive en Flash, une application Flash ou Java, un diaporama sont des médias non temporels. Un média non temporel peut contenir des médias temporels (un lecteur Flash qui propose une liste de vidéos à consulter, par exemple).

— Média non temporel, glossaire du RGAA

Ce qui n’en relève pas : une vidéo ou un podcast, qui se déroulent dans le temps et tombent sous le média temporel ; une image fixe, qui relève de la thématique 1.

Le genre, dans cette définition, c’est le contenu servi par un plugin, un svg ou un canvas ; les exemples qui suivent en sont des cas. Le diaporama qu’elle nomme est donc le diaporama Flash, pas n’importe quel enchaînement de diapositives. Un carrousel écrit en HTML et en JavaScript ne tombe pas ici : il relève d’autres critères — arrêt du défilement, nom des commandes, diapositives masquées —, que la fiche Le carrousel détaille.

2. Le lien ou le bouton adjacent

C’est le cœur du critère 4.8, et le glossaire en fixe la place au caractère près :

Lien ou bouton présenté de manière adjacente à un élément dans la page. Le lien ou bouton doit être adjacent visuellement dans la représentation graphique (CSS activé) et dans le code HTML. Dans le code HTML, le lien ou bouton doit se situer juste avant ou juste après l’élément auquel il est adjacent.

— Lien ou bouton adjacent, glossaire du RGAA

<canvas
	id="plan"
	width="560"
	height="230"
	role="img"
	aria-label="Plan du rez-de-chaussée : le hall, deux salles au fond, l'atelier à droite."
></canvas>

<!-- Voisin immédiat du plan, ici comme à l'écran. -->
<button type="button" aria-expanded="false" aria-controls="plan-en-liste">
	Consulter le plan sous forme de liste
</button>

<div id="plan-en-liste" hidden>…</div>

L’aria-label du canvas dit ce que le plan montre ; il ne dispense de rien. Une alternative textuelle courte ne remplace pas l’alternative du critère 4.8 — elle nomme le média, elle ne le remplace pas.

L’autre route est un lien vers une page dédiée. Elle se justifie quand l’alternative est volumineuse, et elle a un coût : on quitte la page, et il faut pouvoir revenir.

3. L’alternative doit servir, pas seulement décrire

Le test 4.9.1 est en une phrase : l’alternative permet-elle d’accéder au même contenu et à des fonctionnalités similaires ? Deux exigences, et c’est la seconde qu’on oublie.

Listez donc ce que le média permet de faire, puis vérifiez chaque ligne :

Ce que le plan permetCe que l’alternative doit permettre
Lire le nom et la surface d’une salleLes mêmes, en texte
Voir où la salle se situeLe dire en toutes lettres : « au fond du hall, en haut »
Choisir une salle et la mettre en évidenceUn groupe de boutons radio qui fait la même chose

Ce qu’un plan porte par sa géométrie — la disposition, les distances, les voisinages — n’a pas d’équivalent visuel dans une liste. Il faut donc l’écrire.

Et l’alternative est elle-même auditée : le test 4.8.2 demande que la page ou le contenu vers lequel mène le bouton soit accessible. Le glossaire va dans le même sens — un contenu alternatif « devra respecter l’ensemble des critères du RGAA qui lui sont applicables ».

4. Le clavier, ou la même action ailleurs dans la page

Le critère 4.12 se décompose en deux tests, et chacun laisse deux issues : soit la fonctionnalité du média est elle-même accessible et activable au clavier et par tout dispositif de pointage, soit une fonctionnalité équivalente est présente dans la page.

<!-- La seconde issue : ce que le clic sur le plan fait à la souris,
     ce groupe le fait au clavier. -->
<fieldset>
	<legend>Les quatre salles — en choisir une la met en évidence sur le plan</legend>
	<ul role="list">
		<li>
			<input type="radio" id="salle-ada" name="salle" value="ada" />
			<label for="salle-ada">Salle Ada</label>
			<p>28 m², au fond du hall, en haut, rampe d'accès, 12 places.</p>
		</li>
		…
	</ul>
</fieldset>

Un groupe de boutons radio donne d’un coup le focus, les flèches, l’état coché et le comptage « 2 sur 4 » — rien à écrire. « Présente dans la page » se prend au mot : une commande équivalente sur une autre page ne satisfait pas le test.

5. Les trois cas où le critère 4.8 ne s’applique pas

Le référentiel les énumère, et ils sont étroits : le média est décoratif, il est diffusé dans un environnement maîtrisé, ou il est inséré par JavaScript après vérification du plug-in, en remplacement d’un contenu alternatif déjà présent.

Le deuxième cas se réclame souvent à tort :

Les services d’information ou les sites Web, quel que soit leur statut, qui offrent un accès public ne peuvent pas être considérés comme des environnements maîtrisés.

— Environnement maîtrisé, glossaire du RGAA

Le troisième décrit le motif historique de Flash : l’alternative est écrite dans la page, et le script la remplace par le média quand le lecteur est là. Elle existe donc avant lui, ce qui est l’exact contraire du contenu de repli.

6. En avez-vous besoin ?

C’est la question la plus rentable de cette fiche. Un plan peut être une image plus un tableau ; un diaporama, une liste de sections titrées ; une visionneuse de PDF, un lien de téléchargement accompagné du même contenu en HTML. Le média non temporel qu’on n’ajoute pas est celui dont on n’écrit ni l’alternative, ni les commandes clavier.

Quand le média reste justifié — une carte que l’on parcourt vraiment, une application métier —, alors seulement le reste de cette fiche s’applique.

Au clavier

Le média lui-même ne prend pas le focus ici : le canvas de cette démo n’a pas de contenu de repli, rien n’y prend donc le focus. Tout le clavier passe par le bouton adjacent et par l’alternative qu’il ouvre. Un canvas dont le repli contient des éléments focalisables, lui, les laisse dans l’ordre de tabulation — c’est le modèle d’accessibilité du canvas, et une source de pièges : on tabule vers des commandes qu’aucun pixel ne montre.

ToucheEffet
TabPasse le plan et se pose sur le bouton adjacent, qui le suit immédiatement.
Entrée / EspaceOuvre l’alternative sous le bouton ; le focus reste sur le bouton.
Tab (bouton ouvert)Entre dans le groupe de salles, sur celle qui est cochée — un seul arrêt pour les quatre.
↑ ↓ ← →Change de salle et déplace le focus avec le choix ; le plan suit.

Si votre média est une application embarquée qui prend le focus, la règle change : il faut alors vérifier qu’on peut aussi en sortir au clavier, sans quoi le piège au clavier est constitué.

Ce que le lecteur d’écran restitue

Sur le média : son nom et sa nature, rien de plus — « Plan du rez-de-chaussée : le hall, deux salles au fond, l’atelier à droite, image ». Puis, immédiatement après : « Consulter le plan sous forme de liste, bouton, réduit ». Une fois ouvert : « développé », puis « Les quatre salles…, Salle Ada, bouton radio, coché, 2 sur 4 ». La formulation change d’un lecteur à l’autre, les informations non.

Si vous n’entendez que « image » ou « graphique » sans intitulé, l’aria-label ou le role="img" manque sur le canvas — sans rôle, il n’y a rien à nommer, et l’attribut reste sans effet.

Le zéro du relevé mesure autre chose : il compte le texte que le canvas expose dans le DOM, c’est-à-dire son contenu de repli, qui est vide ici. Le nom que le lecteur d’écran annonce ne vient pas de là, mais de l’aria-label. Un média peut donc porter un nom et n’offrir aucun contenu — c’est précisément pourquoi le bouton doit suivre.

Si vous entendez le nom du média puis, aussitôt, le contenu suivant de la page, le bouton adjacent manque. Si l’alternative annonce du texte mais aucune commande, elle décrit sans servir : le test 4.9.1 n’est pas rempli.

Checklist

  • Vérifier d’abord la définition du glossaire : une vidéo ou une image n’entrent pas ici.
  • Un lien ou un bouton adjacent — juste avant ou juste après, à l’écran et dans le code.
  • Ne jamais compter sur le contenu de repli de l’objet : il ne paraît que s’il échoue.
  • L’alternative donne le même contenu et des fonctionnalités similaires.
  • Écrire ce que la géométrie du média dit toute seule : position, ordre, voisinage.
  • Auditer l’alternative elle-même — le test 4.8.2 la veut accessible.
  • Chaque fonction du média atteignable et activable au clavier, ou doublée dans la page.
  • Se demander si le média embarqué est nécessaire.

Les critères RGAA en jeu

  • Critère 4.8 — Alternative des médias non temporels

    Le référentiel n'accepte ici que deux routes : un lien ou un bouton adjacent vers une page d'alternative, ou vers une alternative dans la page. Le contenu de repli enfermé dans l'objet n'en est pas une — il ne paraît que si le média échoue.

  • Critère 4.9 — Pertinence de l’alternative du média

    Une alternative qui décrit le média sans permettre d'en faire autant échoue : le test demande le même contenu et des fonctionnalités similaires, pas un résumé de ce que l'on rate.

  • Critère 4.12 — Contrôle des médias non temporels

    Zoom, déplacement, sélection, changement de page : les fonctions d'une visionneuse ne répondent souvent qu'à la souris. Il faut soit les rendre pilotables au clavier, soit offrir la même action ailleurs dans la page.

  • Critère 4.13 — Compatibilité des médias

    Un canvas n'expose ni nom, ni rôle, ni état : ce qu'il affiche n'existe pas dans l'arbre d'accessibilité, et seule une alternative compatible avec une API d'accessibilité rattrape ce silence.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources