Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Un graphique en barres montrant l’évolution du chômage sur dix ans, une carte géographique avec des zones colorées, un schéma électrique : pour ces images, un texte alternatif de quelques mots ne suffit pas. Un utilisateur de lecteur d’écran a besoin de la même information que celui qui voit l’image. Si l’information est complexe, la description doit l’être aussi.
Le critère 1.6 s’applique uniquement aux images porteuses d’information qui ne peuvent pas être décrites exhaustivement dans le texte alternatif court. La distinction est simple : si l’alt suffit à transmettre toute l’information, ce critère ne s’applique pas. Si l’alt ne peut qu’esquisser le contenu, une description détaillée est obligatoire.
Plusieurs mécanismes sont acceptés selon le type d’élément : l’attribut longdesc pour les <img>, un attribut aria-describedby pointant vers un passage de texte, un lien ou un bouton adjacent permettant d’accéder à la description, ou encore une référence dans le texte alternatif lui-même. Les éléments <svg> et <canvas> ont leurs propres règles, couvertes par les tests 1.6.5 à 1.6.8.
Attention au test de restitution : pour <svg> et <canvas> utilisant aria-describedby, aria-label ou aria-labelledby, il ne suffit pas que l’attribut soit présent. Il faut vérifier que le contenu est effectivement vocalisé par les technologies d’assistance (tests 1.6.6 et 1.6.8).
10 tests pour vérifier qu'une description détaillée accompagne les images complexes
Description détaillée <img> et role="img"
Pour chaque <img> et chaque élément avec role="img" dont l’information est trop complexe pour tenir dans l’alt :
- Vérifiez qu’au moins l’une de ces solutions est présente :
- Un attribut
longdescavec l’URL de la page (ou ancre dans la page) contenant la description complète. - Un texte alternatif (alt ou aria-label) qui mentionne explicitement une description adjacente.
- Un lien ou un bouton juste à côté de l’image permettant d’accéder à la description.
- Un attribut
- Si aucune de ces solutions n’est présente pour au moins une image, le test échoue.
Description détaillée <object>
Pour chaque <object type="image/…"> nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
- Le texte alternatif de l’objet mentionne l’emplacement d’une description adjacente.
- Un lien ou un bouton adjacent mène à la description complète.
- Note :
longdescn’est pas un mécanisme accepté pour<object>. - Si aucune solution n’est présente pour au moins un élément, le test échoue.
Description détaillée <embed>
Pour chaque <embed type="image/…"> nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
- Le texte alternatif de l’élément mentionne l’emplacement d’une description adjacente.
- Un lien ou un bouton adjacent mène à la description complète.
- Si aucune solution n’est présente pour au moins un élément, le test échoue.
Description détaillée <input type="image">
Pour chaque <input type="image"> nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
- Le texte alternatif (alt) mentionne l’emplacement d’une description adjacente.
- Un lien ou un bouton adjacent mène à la description complète.
- Un attribut
aria-describedbypointe vers un élément contenant la description détaillée.
- Si aucune solution n’est présente pour au moins un élément, le test échoue.
Description détaillée <svg>
Pour chaque <svg> nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
aria-labelcontenant à la fois l’alternative courte et une référence à la description adjacente.aria-labelledbyréférençant deux éléments : l’un pour le nom court, l’autre pour la description longue.aria-describedbypointant vers un élément contenant la description détaillée.- Un lien ou un bouton adjacent permettant d’accéder à la description.
- Si aucune solution n’est présente pour au moins un
<svg>, le test échoue.
Restitution de la description détaillée <svg>
Pour chaque <svg> dont la description détaillée utilise aria-label, aria-labelledby ou aria-describedby :
- Testez avec au moins un lecteur d’écran (NVDA, JAWS ou VoiceOver).
- Vérifiez que le contenu de la description détaillée est bien vocalisé lors de la navigation sur l’image.
- Si la description n’est pas restituée, le test échoue — même si l’attribut est syntaxiquement correct.
Description détaillée <canvas>
Pour chaque <canvas> nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
aria-labelcontenant l’alternative courte et une référence à la description adjacente.aria-labelledbyréférençant deux éléments : nom court et description longue.- Contenu textuel entre
<canvas>et</canvas>référençant une description adjacente. - Contenu textuel entre
<canvas>et</canvas>constituant directement la description détaillée. - Un lien ou un bouton adjacent menant à la description.
- Si aucune solution n’est présente pour au moins un
<canvas>, le test échoue.
Restitution de la description détaillée <canvas>
Pour chaque <canvas> dont la description détaillée utilise aria-label, aria-labelledby ou aria-describedby :
- Testez avec au moins un lecteur d’écran.
- Vérifiez que le contenu de la description détaillée est bien vocalisé lors de la navigation sur l’élément.
- Si la description n’est pas restituée, le test échoue — même si l’attribut est présent et syntaxiquement valide.
Restitution via aria-describedby toutes images
Ce test couvre tous les types d’images (<img>, <input type="image">, <area>, <object>, <embed>, <svg>, <canvas>, role="img") dont la description détaillée est fournie via aria-describedby :
- Identifiez tous ces éléments utilisant
aria-describedbypour une description longue. - Pour chacun, testez avec un lecteur d’écran : la description référencée doit être vocalisée.
- Si la description n’est pas restituée pour au moins un élément, le test échoue.
Description détaillée éléments role="img"
Pour chaque élément avec role="img" (un <div>, un <span>, etc.) nécessitant une description détaillée :
- Vérifiez qu’au moins l’une de ces solutions est présente :
aria-labelcontenant l’alternative courte et une référence à la description adjacente.aria-labelledbyréférençant deux éléments : nom court et description longue.aria-describedbypointant vers un élément contenant la description détaillée.- Un lien ou un bouton adjacent menant à la description.
- Si aucune solution n’est présente pour au moins un élément, le test échoue.
Exemples
❌ Non conforme : Graphique complexe sans description détaillée
<img src="evolution-part-marche-2015-2024.png" alt="Évolution des parts de marché 2015-2024">L’attribut alt indique que l’image montre une évolution, mais sans chiffres, sans tendances, sans légende. Un utilisateur de lecteur d’écran sait qu’il s’agit d’un graphique, mais ne peut pas extraire les données. L’information utile — les valeurs, les écarts, les tendances — est perdue.
✅ Conforme : Graphique avec longdesc pointant vers une description complète
<img
src="evolution-part-marche-2015-2024.png"
alt="Évolution des parts de marché 2015-2024 (voir description détaillée)"
longdesc="#description-graphique-marche"
>
<div id="description-graphique-marche">
<h3>Description détaillée : évolution des parts de marché 2015-2024</h3>
<p>En 2015, l’entreprise A détient 42 % du marché, B 31 %, C 27 %. En 2020, A monte à 48 %, B recule à 26 %, C reste stable à 26 %. En 2024, A atteint 55 %, B chute à 21 %, C baisse à 24 %.</p>
</div>L’attribut longdesc pointe vers une section de la même page contenant les données complètes. Le texte alternatif prévient l’utilisateur qu’une description est disponible. Un lecteur d’écran peut accéder aux données chiffrées exactement comme un utilisateur voyant les lisant sur le graphique.
✅ Conforme : SVG complexe avec aria-describedby
<svg role="img" aria-labelledby="titre-carte" aria-describedby="desc-carte">
<title id="titre-carte">Carte des résultats électoraux par département</title>
<!-- chemins SVG des départements -->
</svg>
<p id="desc-carte">
La carte montre les résultats du premier tour. Le candidat A arrive en tête dans 67 départements (colorés en bleu),
le candidat B dans 31 départements (en orange), le candidat C dans 7 départements (en vert).
Les départements d’Île-de-France votent majoritairement pour A avec des scores supérieurs à 35 %.
</p>Le <svg> expose un nom court via aria-labelledby et une description longue via aria-describedby. Le texte de description est visible sur la page — ce qui bénéficie aussi aux utilisateurs à faible vision ou à ceux qui préfèrent lire plutôt que d’interpréter un visuel complexe. Reste à valider le test 1.6.6 : vérifier la restitution effective avec un lecteur d’écran.
Astuces et pièges
⚠️ L’attribut longdesc est présent mais non testé
longdesc est l’un des attributs HTML les moins bien supportés en pratique. L’attribut peut être syntaxiquement valide et pointer vers une URL correcte, mais certaines combinaisons navigateur/lecteur d’écran ne l’exposent pas. En audit RGAA, les tests 1.6.6, 1.6.8 et 1.6.9 exigent une vérification de restitution réelle — pas seulement une vérification de code source. La présence de l’attribut ne suffit pas.
⚠️ Confondre description courte (alt) et description détaillée
Le critère 1.6 ne s’applique que si l’alt ne peut pas transmettre l’intégralité de l’information. Une photo de produit avec un alt descriptif satisfait le critère 1.5, pas le 1.6. La description détaillée est réservée aux images complexes : graphiques de données, cartes, diagrammes, plans. Si votre alt fait 120 caractères et dit tout, inutile d’ajouter un longdesc.
💡 Le lien adjacent : la solution la plus robuste
Un lien ou un bouton adjacent à l’image, menant à une page ou une section de description, fonctionne avec tous les lecteurs d’écran sans exception, sans dépendre du support de longdesc ou des particularités de restitution ARIA. C’est la technique qui passe le plus sûrement les tests 1.6.1 à 1.6.5 et 1.6.10. Le texte du lien doit être explicite : « Description détaillée du graphique des ventes », pas « En savoir plus ».
⚠️ aria-describedby et texte hors écran : piège classique
Masquer la description détaillée avec display : none ou visibility : hidden la rend inaccessible aux lecteurs d’écran, même si aria-describedby la référence. Si vous voulez la cacher visuellement mais la garder accessible, utilisez une classe CSS de type visually-hidden (position absolute, clip, etc.). Mais attention : un texte visuellement caché mais vocalisé peut dérouter les utilisateurs voyants. La description visible bénéficie à tous.
⚠️ canvas : deux niveaux de solution
Pour <canvas>, le RGAA accepte un contenu de repli entre les balises ouvrante et fermante. Ce contenu est rendu aux lecteurs d’écran quand le canvas n’est pas supporté, mais aussi comme alternative accessible dans les navigateurs modernes. Un <canvas> contenant directement la description entre ses balises satisfait le test 1.6.7 sans nécessiter ARIA — c’est souvent la solution la plus simple pour les graphiques générés dynamiquement.
💡 Rendre la description visible profite à tout le monde
Une description détaillée placée dans un élément visible juste en dessous de l’image (un <p>, un <details>) bénéficie aux utilisateurs de lecteurs d’écran, mais aussi aux personnes à faible vision, aux utilisateurs sur mobile qui ont du mal à lire un graphique petit, et aux moteurs de recherche. Ce n’est pas un compromis : c’est souvent la meilleure solution pour tous.
Questions fréquentes
Quand une image nécessite-t-elle une description détaillée RGAA plutôt qu'un simple texte alt ?
La règle pratique : si vous ne pouvez pas transmettre toute l’information utile de l’image en une ou deux phrases, une description détaillée est nécessaire. Un graphique avec des valeurs chiffrées, une carte avec plusieurs zones, un organigramme avec des relations hiérarchiques : ces images nécessitent une description longue. Une icône, une photo illustrative ou une image de produit : un alt bien rédigé suffit généralement.
Comment intégrer une description détaillée RGAA dans un <details> masqué par défaut ?
Oui, c’est une bonne solution. Un élément <details><summary>Description détaillée</summary><p>...</p></details> placé juste après l’image satisfait le critère : le lien (ici le <summary>) est adjacent, et la description est accessible. Le contenu de <details> est correctement restitué par les lecteurs d’écran modernes. Vérifiez toutefois que le <summary> est suffisamment descriptif pour qu’on comprenne à quelle image il se rapporte.
Comment auditer le critère RGAA 1.6 sur les descriptions détaillées en pratique ?
En trois étapes : 1) Identifiez les images complexes (graphiques, cartes, schémas) — ce sont les candidates. 2) Vérifiez dans le code source qu’un mécanisme de description est présent (longdesc, aria-describedby, lien adjacent, texte de repli pour <canvas>). 3) Pour les mécanismes ARIA (aria-describedby, aria-label, aria-labelledby sur SVG et canvas), testez la restitution réelle avec NVDA + Firefox ou JAWS + Chrome. Cette troisième étape est celle que la plupart des auditeurs débutants oublient.
Comment distinguer une image informative d'une image décorative pour appliquer le critère RGAA 1.6 ?
Non. Le critère 1.6 concerne uniquement les images porteuses d’information qui nécessitent une description détaillée. Une image décorative doit avoir alt="" (critère 1.2) et n’a pas de description à fournir. Si votre image a alt="", vous n’avez rien à vérifier pour le 1.6.
Comment utiliser aria-describedby sur un <img> pour satisfaire le critère RGAA 1.6 ?
Oui. Le test 1.6.1 cite longdesc, un texte alternatif référençant une description adjacente, ou un lien/bouton adjacent. Mais le test 1.6.9 couvre aria-describedby pour tous les types d’images, y compris <img>. Cette technique est valide : <img aria-describedby="desc"> avec un élément id="desc" contenant la description. Vérifiez ensuite la restitution (test 1.6.9) — support variable selon les couples navigateur/lecteur d’écran.