Description détaillée

La description détaillée est un texte long qui complète le alt d'une image complexe (graphique, diagramme, carte). Quand une phrase ne suffit pas à restituer l'information portée par un visuel, la description détaillée fournit l'équivalent textuel complet, sous forme de paragraphes, de listes ou de tableaux de données.

Un graphique de ventes trimestrielles avec alt="Graphique des ventes 2025" ne transmet rien à une personne qui ne voit pas l'image. Les chiffres restent cachés. Les tendances aussi. La description détaillée existe pour combler ce vide.

#Quand le alt ne suffit plus

Le W3C classe les images complexes à part : graphiques, organigrammes, diagrammes, cartes. Pour ces visuels, une seule phrase de alt ne peut pas restituer l'information.

Il faut deux textes :

• Le court : le alt, qui identifie l'image en une phrase.
• Le long : la description détaillée, qui restitue toute l'information portée par le visuel.

Le critère 1.6 du RGAA vérifie ce point : chaque image porteuse d'information complexe doit posséder une description détaillée, adjacente à l'image ou accessible via un lien situé juste à côté.

#Comment l'implémenter

Oubliez longdesc. L'attribut a fait l'objet d'une recommandation W3C en 2015, mais les navigateurs ne le supportent plus.

Deux approches fonctionnent aujourd'hui :

aria-describedby relie l'image à un élément de la page contenant la description :

<figure>
  <img src="ventes-t3.png"
       alt="Graphique des ventes T3 2025"
       aria-describedby="desc-ventes">
  <p id="desc-ventes">
    Chiffre d'affaires de 1,2 M€ au T3,
    en hausse de 18 % par rapport au T2.
    Le secteur B2B représente 67 % du total.
  </p>
</figure>

Lien adjacent : la technique G73 du W3C place un lien juste après l'image, pointant vers la description complète. Pratique quand la description est longue et alourdirait la page.

#Le piège classique

Bourrer le alt de 80 mots. Les lecteurs d'écran lisent le alt d'une traite, sans pause. Au-delà de deux phrases, l'utilisateur décroche. La description détaillée, elle, se lit comme du texte normal : paragraphes, listes, tableaux de données. Deque University recommande de ne pas dépasser 140 caractères dans le alt.

Un piège moins visible : masquer la description en CSS (display: none) sans la référencer via aria-describedby. Un contenu masqué visuellement n'est accessible aux technologies d'assistance que s'il est relié par un attribut ARIA. Sans ce lien, le texte existe dans le code. Personne ne le trouve.

#En résumé

Une image complexe a besoin de deux textes : un alt court qui l'identifie, une description détaillée qui restitue l'information. Oubliez longdesc. Utilisez aria-describedby ou un lien adjacent.