<desc> en SVG : la description que seuls les lecteurs d'écran entendent

Une icône seule sur un tableau de bord, une cloche, une flèche, un histogramme, ne raconte rien à un lecteur d'écran : ce ne sont que des traits et des courbes. Un moteur de recherche ne comprend pas mieux ce contenu, alors qu'il indexe sans peine le texte d'une page HTML classique. Le SVG a besoin d'un canal séparé pour porter ce sens.

C'est le rôle de <desc> : un texte de description qui vit dans le code du SVG sans jamais apparaître à l'écran, réservé aux technologies d'assistance et à certains outils d'indexation.

Définition

<desc> est un élément de description. Placé comme premier ou deuxième enfant d'un <svg>, ou d'un élément graphique comme <path> ou <image>, il contient un texte libre, aussi long que nécessaire, qui explique ce que représente la forme ou l'illustration. Ce texte n'est jamais dessiné : il n'a ni police, ni couleur, ni position. Il n'existe que dans le code source, exactement comme l'attribut alt d'une image HTML classique, mais avec la place pour un paragraphe entier plutôt qu'une courte phrase.

Où le placer et comment le relier

<desc> n'a pas d'attribut à lui : ce qui compte, c'est sa position dans l'arbre et, si vous voulez que la description soit vraiment prise en compte, un identifiant relié à l'élément parent par aria-describedby. Sur la racine <svg>, ajouter role="img" confirme aux technologies d'assistance qu'il s'agit d'une image complète, et pas d'un simple décor qu'elles peuvent ignorer.

<svg
  viewBox="0 0 24 24"
  width="48"
  height="48"
  role="img"
  aria-labelledby="titreCloche"
  aria-describedby="descCloche"
>
  <title id="titreCloche">Alerte de sécurité</title>
  <desc id="descCloche">
    Une cloche penchée signale qu'un évènement nécessite votre attention
    immédiate sur le tableau de bord.
  </desc>
  <path
    d="M12 2a1 1 0 0 1 1 1v1.1a7 7 0 0 1 6 6.9v4l1.6 2.2a1 1 0 0 1-.8 1.8H5.2a1 1 0 0 1-.8-1.8L6 15v-4a7 7 0 0 1 6-6.9V3a1 1 0 0 1 1-1z"
    fill="#1f2937"
  />
  <circle cx="12" cy="21" r="1.6" fill="#1f2937" />
</svg>

<desc> face au <title> SVG et à l'attribut title HTML

Trois mécanismes portent presque le même nom, et les confondre est la source d'erreur la plus fréquente. L'attribut title="..." est une propriété HTML universelle : posée sur un <div>, un <button> ou même la racine <svg>, elle déclenche l'infobulle native du navigateur au survol de la souris. L'élément <title>, lui, est propre au SVG : posé comme premier enfant d'un <svg> ou d'une forme, il donne un nom court, l'équivalent d'un intitulé de bouton, et sert aussi d'infobulle dans certains navigateurs de bureau. <desc> va plus loin : il porte une description longue, faite pour être lue et comprise, jamais pour tenir dans une bulle qui disparaît au bout de deux secondes.

Exemple de rendu concret

Reprenons l'icône de cloche du premier exemple. Visuellement, rien ne change : la forme s'affiche exactement pareil, avec ou sans <desc>. La différence se joue ailleurs, dans l'arbre d'accessibilité que le navigateur construit en coulisses. Un lecteur d'écran annonce d'abord le nom court porté par <title>, « Alerte de sécurité », puis, si l'utilisateur demande plus de détails, lit la description complète portée par <desc>. Un visiteur voyant ne perçoit jamais ce deuxième niveau, et ne le manque pas non plus, puisqu'il voit directement la forme.

Piège classique

Cas d'usage réel

Sur un tableau de bord financier, un graphique en courbes dessiné avec <path> peut sembler parfaitement clair à l'œil et rester complètement muet pour un lecteur d'écran. Ajouter un <desc> qui résume la tendance, par exemple « Chiffre d'affaires en hausse de 12% au troisième trimestre, avec un pic en septembre », rend cette information disponible sans changer un seul pixel du graphique. Une bibliothèque d'icônes ou un logo animé profitent de la même logique : la forme reste identique, mais son sens devient enfin accessible à qui ne peut pas la voir.

Questions fréquentes

Non, seulement quand le SVG porte une information que le texte environnant ne donne pas déjà. Une icône purement décorative à côté d'un libellé, comme une flèche suivant un lien déjà nommé, n'a besoin ni de <desc> ni de <title> : elle peut même être masquée aux technologies d'assistance avec aria-hidden="true".

Oui, la spécification autorise un peu de mise en forme interne basique et un texte de la longueur que vous jugez utile. Dans la pratique, viser deux ou trois phrases claires reste plus utile qu'un pavé qu'aucun utilisateur ne prendra la peine d'écouter en entier.

Ces outils exportent surtout la géométrie visible et laissent l'accessibilité de côté par défaut. Le texte de <desc> se rajoute presque toujours après coup, directement dans le code SVG exporté, en même temps que le nettoyage des identifiants et des groupes inutiles.