Tuto SVG 13 - Accessibilité

Public visé: dev lambda.

Objectif

• Rendre un SVG compréhensible par les lecteurs d'écran.

Références W3C

• SVG 2 - Accessibility Support: https://www.w3.org/TR/SVG2/access.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120"
     role="img" aria-labelledby="title desc">
  <title id="title">Badge SVG</title>
  <desc id="desc">Un cercle bleu avec le texte SVG au centre.</desc>
  <circle cx="60" cy="60" r="40" fill="#3a6ea5"/>
  <text x="60" y="66" text-anchor="middle" font-size="16" fill="white">SVG</text>
</svg>

tutos-svg-13-accessibilite.svg

À retenir

• title et desc donnent le contexte.
• role="img" et aria-labelledby améliorent l'annonce.
• Les textes visibles doivent garder un bon contraste.

Exercice

• Ajoute un desc plus précis (forme, couleur, message).