Les animations, cartes interactives et autres éléments graphiques non vidéo sont-ils accompagnés d'une alternative textuelle quand ils transmettent une information ?
Critère officiel 4.8 — Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?
Pourquoi c'est important
Une infographie animée sur les travaux en cours ou une carte interactive des équipements communaux est totalement inaccessible à une personne aveugle si aucune alternative textuelle n'est prévue. Elle ne peut pas accéder à l'information présentée sous cette forme.
Exemples concrets
Ce qui est conforme
La carte interactive des équipements sportifs est accompagnée d'une liste textuelle des équipements avec leur adresse et leurs horaires. Une personne qui ne peut pas utiliser la carte interactive accède aux mêmes informations via la liste.
Ce qui pose problème
L'infographie animée sur l'avancement des travaux de rénovation de la salle des fêtes est publiée sans aucune alternative. Une personne aveugle, ou dont le navigateur ne charge pas l'animation, ne peut pas savoir où en sont les travaux.
Comment agir
Pour chaque élément graphique non vidéo (infographie, carte interactive, animation Flash ou JavaScript), demandez à votre prestataire de prévoir une alternative textuelle équivalente. La solution la plus simple est souvent un tableau ou une liste publiée juste en dessous de l'élément graphique.
Règles clés
- Fournir une alternative textuelle adjacente ou via aria-describedby.
- Un tableau HTML est souvent la meilleure alternative pour une visualisation de données.
- Si le média est rendu accessible directement (SVG avec role='img' + titre) : préférable à une alternative séparée.
Erreurs fréquentes
- Animation SVG complexe porteuse d'information sans alternative textuelle
- Graphique Canvas sans alternative ni tableau de données
- Diagramme interactif JS sans équivalent textuel
Exemples de code
Canvas sans alternative
✗ Non conforme<canvas id="graphique"
width="600" height="400">
</canvas>Le Canvas est une zone de dessin opaque pour les AT. Sans alternative, son contenu est totalement inaccessible.
Canvas avec alternative tableau
✓ Conforme<figure>
<canvas id="graphique"
role="img"
aria-label="Ventes 2024"
aria-describedby="data-ventes"
width="600" height="400">
</canvas>
<figcaption>
<details id="data-ventes">
<summary>Données du graphique</summary>
<table><!-- données --></table>
</details>
</figcaption>
</figure>role='img' + aria-label identifient le Canvas. Le tableau fournit les données structurées accessibles.
Référence WCAG : 1.1.1