Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?
Un graphique de tendances avec une description longue qui dit juste « Évolution des ventes » : cette description existe sur le papier, mais ne transmet rien. Le critère 1.6 vérifiait qu’une description détaillée était en place. Le 1.7 va plus loin : cette description est-elle vraiment pertinente ?
Une description pertinente retranscrit l’intégralité de l’information visuelle portée par l’image. Pour un graphique en courbes : les valeurs, les axes, les légendes, les tendances. Pour une infographie : chaque donnée clé dans l’ordre logique. Le critère est simple à énoncer. Difficile à réussir en pratique.
La méthode d’audit est directe : lisez la description détaillée sans regarder l’image. Si vous manquez une donnée pour comprendre le contenu, la description a échoué. Ce critère couvre six types d’éléments : <img>, <input type="image">, <object>, <embed>, <svg> et <canvas>.
6 tests pour évaluer la pertinence de la description détaillée
Pertinence de la description détaillée <img>
- Repérez tous les éléments
<img>qui disposent d’une description détaillée (viaaria-describedby, un lien adjacent, ou un contenu visible lié). - Pour chacun, lisez la description sans regarder l’image.
- Vérifiez que la description retranscrit toute l’information visuelle portée par l’image. Aucune donnée clé ne doit manquer.
- Si une description est incomplète, inexacte ou se contente de répéter l’
alt, le test échoue.
Pertinence de la description détaillée <input type="image">
- Repérez tous les éléments
<input type="image">qui disposent d’une description détaillée. - Pour chacun, lisez la description sans regarder l’image du bouton.
- Vérifiez que la description retranscrit fidèlement l’information visuelle portée par l’image du bouton.
- Si la description ne correspond pas à ce que l’image transmet, le test échoue.
Pertinence de la description détaillée <object>
- Repérez tous les éléments
<object type="image/…">qui disposent d’une description détaillée. - Pour chacun, lisez la description sans regarder l’image.
- Vérifiez que la description couvre l’intégralité de l’information visuelle.
- Une description incomplète ou inexacte fait échouer le test.
Pertinence de la description détaillée <embed>
- Repérez tous les éléments
<embed type="image/…">qui disposent d’une description détaillée. - Pour chacun, lisez la description sans regarder l’image.
- Vérifiez que la description retranscrit fidèlement toute l’information visuelle portée par l’image.
- Une description vague ou partielle fait échouer le test.
Pertinence de la description détaillée <svg>
- Repérez tous les éléments
<svg>qui disposent d’une description détaillée (via l’élément enfant<desc>,aria-describedby, ou un contenu lié). - Pour chacun, lisez la description sans regarder le SVG.
- Vérifiez que la description retranscrit l’ensemble de l’information visuelle, y compris les valeurs et légendes.
- Si des données visuelles importantes sont absentes de la description, le test échoue.
Pertinence de la description détaillée <canvas>
- Repérez tous les éléments
<canvas>qui disposent d’une description détaillée. - Pour chacun, lisez la description sans regarder le contenu rendu par le canvas.
- Vérifiez que la description couvre toute l’information visuelle générée.
- Une description qui n’aborde qu’une partie du contenu fait échouer le test.
Exemples
❌ Non conforme : Graphique avec description non pertinente
<img
src="courbe-ventes-2025.png"
alt="Courbe des ventes 2025"
aria-describedby="desc-courbe">
<p id="desc-courbe">Ce graphique illustre les ventes de l’entreprise sur l’année 2025.</p>La description répète mot pour mot ce que l’attribut alt dit déjà. Elle ne donne aucune valeur chiffrée, aucune tendance, aucune légende d’axe. Un utilisateur de lecteur d’écran sait qu’un graphique existe ; il n’en connaît pas le contenu. La description est présente au sens technique, non pertinente au sens du critère 1.7.
✅ Conforme : Graphique avec description détaillée pertinente
<img
src="courbe-ventes-2025.png"
alt="Courbe des ventes 2025"
aria-describedby="desc-courbe">
<p id="desc-courbe">Graphique en courbe, ventes mensuelles de janvier à décembre 2025.
Axe horizontal : les 12 mois de l’année.
Axe vertical : chiffre d’affaires en milliers d’euros, de 0 à 500.
Tendance générale ascendante. Valeurs notables :
janvier 120k, mars 180k (pic printanier),
juillet 95k (creux estival), décembre 480k (pic de fin d’année).</p>La description retranscrit les axes, les plages de valeurs, la tendance générale et les chiffres clés. Un utilisateur qui ne voit pas le graphique obtient exactement la même information que celui qui le regarde. C’est le seuil de pertinence visé par le critère.
Astuces et pièges
⚠️ Répéter l’alt dans la description détaillée
C’est l’erreur la plus fréquente en audit sur ce critère. L’alt fournit un équivalent court, quelques mots. La description détaillée retranscrit l’intégralité de l’information visuelle. Écrire « Graphique des ventes du T3 2025 » dans les deux champs n’est pas une description pertinente : c’est une répétition.
⚠️ Décrire le style plutôt que le contenu
Écrire « Graphique bleu et orange avec une légende en bas à droite » décrit la mise en forme, pas l’information. La couleur d’une barre n’a aucune valeur pour un utilisateur qui ne voit pas l’image. Seules les données, les tendances et les significations comptent.
⚠️ SVG avec élément <desc>
Pour un <svg>, l’élément enfant <desc> peut tenir lieu de description détaillée. La pertinence s’évalue de la même façon : est-ce que <desc> retranscrit tout le contenu visuel ? Un <desc> qui dit « Diagramme en secteurs » sans citer les pourcentages de chaque secteur est non pertinent, même s’il est techniquement présent.
💡 Structurer la description comme un tableau de données
Pour les graphiques complexes, la description la plus robuste reproduit les données dans un tableau HTML adjacent lié via aria-describedby. Ce mécanisme est à la fois pertinent, maintenable et visible de tous, pas seulement des utilisateurs de lecteurs d’écran. Bonus : le tableau est aussi utile sur mobile avec une connexion lente, quand l’image ne charge pas.
⚠️ Contenu adjacent qui fait office de description
Si un paragraphe placé juste après l’image décrit déjà son contenu en détail, il peut servir de description détaillée. Le RGAA accepte ce mécanisme à condition que le lien soit établi : via aria-describedby pointant vers ce paragraphe, ou une mention dans l’alt du type « voir description ci-après ». La pertinence s’évalue de façon identique.
Questions fréquentes
Comment évaluer la pertinence d'une description détaillée selon le critère RGAA 1.7 ?
Couvrez l’image et lisez uniquement la description. Si vous avez besoin de regarder l’image pour compléter votre compréhension, la description est insuffisante. Une description pertinente rend l’image superflue pour obtenir l’information, pas pour la voir.
Quels éléments doivent figurer dans une description détaillée d'image pour satisfaire le RGAA ?
Tous les détails porteurs d’information. Un graphique avec 12 valeurs mensuelles : chacune doit apparaître. En revanche, la couleur des barres n’est pas à décrire si elle n’est pas sémantique. La règle : décrivez tout ce dont l’absence changerait la compréhension du contenu.
Comment masquer visuellement une description détaillée tout en respectant le critère RGAA 1.7 ?
Une description masquée via display:none ou visibility:hidden n’est pas restituée par les lecteurs d’écran. Pour être accessible, elle doit être dans le DOM et restitutable : soit visible de tous, soit hors-écran avec la technique du clip CSS, soit accessible depuis un lien ou bouton adjacent. Le RGAA valide plusieurs mécanismes, à condition que l’information soit réellement atteignable.
Comment appliquer le critère RGAA 1.7 aux éléments <canvas> générés dynamiquement par JavaScript ?
Oui. Peu importe que le <canvas> soit statique ou rendu dynamiquement, si l’élément porte une information, sa description détaillée doit être pertinente. Pour les graphiques générés en JavaScript, la solution la plus robuste est un tableau HTML adjacent mis à jour en même temps que le canvas.
Comment auditer le critère RGAA 1.7 efficacement sur un site avec de nombreuses images ?
Filtrez d’abord les images qui ont une description détaillée (présence d’aria-describedby ou d’un lien adjacent). C’est généralement rare : la plupart des sites ne passent déjà pas le critère 1.6. Sur les images concernées, appliquez le test de couverture : lisez la description seule et listez les informations manquantes. Une seule donnée absente suffit à faire échouer le test.