English

<title>

Donner un titre et une description accessibles au SVG

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<title> + <desc> SVG — Accessibilité du graphique

En SVG, <title> fournit un nom court accessible (équivalent du alt d'une image) et <desc> une description longue. Ensemble, ils rendent un graphique vectoriel comprehensible pour les personnes qui ne le voient pas.

Quand l'utiliser

Ton SVG transmet de l'information (graphique, schema, icône signifiante). Place un <title> comme premier enfant du <svg> et un <desc> juste après. Lié-les avec aria-labelledby pour une compatibilité maximale avec les lecteurs d'écran.

Ce que tu gagnes

Accessibilité : <title> est annonce par les lecteurs d'écran comme le nom de l'image. <desc> donne le détail. Sans eux, un SVG complexe est un trou noir pour les technologies d'assistance.

Exemple de code

<svg role="img" aria-labelledby="pie-title pie-desc"
     viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <title id="pie-title">Market share distribution</title>
  <desc id="pie-desc">
    Pie chart showing: Product A at 45%, Product B at 30%, Others at 25%.
  </desc>
  <circle cx="50" cy="50" r="40" fill="teal"
          stroke-dasharray="113 251" stroke-dashoffset="0"
          stroke="coral" stroke-width="80" />
</svg>

Pour aller plus loin