Produire un SVG accessible, pas à pas

Ce tutoriel vous fait construire, à partir de rien, un SVG que les lecteurs d'écran savent annoncer. Vous partirez d'un fichier minimal, vous ajouterez le texte alternatif, les rôles ARIA, puis vous vérifierez le résultat. Chaque étape part de la précédente : suivez-les dans l'ordre, le chemin est garanti.

Public visé : vous connaissez un peu HTML/CSS, mais pas forcément le SVG. Aucune bibliothèque n'est nécessaire, juste un éditeur de texte et un navigateur.

Ce que vous allez obtenir

Un badge circulaire avec un libellé au centre, qu'un lecteur d'écran annoncera comme une image accompagnée de sa description, et dont le texte visible reste lisible pour les personnes malvoyantes.

Étape 1 — Un SVG minimal qui s'affiche

Créez un fichier badge.svg (ou collez le code dans une page HTML) avec le strict minimum : la balise racine, son espace de noms, et une forme.

<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="120" viewBox="0 0 220 120">
  <circle cx="60" cy="60" r="40" fill="#3a6ea5"/>
</svg>

Deux points à retenir dès maintenant :

Sans l'attribut xmlns, le navigateur ne traite pas le fichier comme du SVG.
viewBox définit l'espace de dessin interne ; width/height la taille affichée. Ils sont indépendants.

Ouvrez le fichier dans un navigateur : vous devez voir un cercle bleu. Tant que ce n'est pas le cas, ne passez pas à la suite.

À ce stade, pour un lecteur d'écran, cette image est muette : rien ne dit ce qu'elle représente. C'est ce que nous allons corriger.

Étape 2 — Ajouter un texte visible lisible

Ajoutons le libellé au centre du badge.

<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="120" viewBox="0 0 220 120">
  <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>

text-anchor="middle" centre le texte sur son point d'ancrage x. Le texte d'un SVG est du vrai texte : sélectionnable, zoomable, indexable.

Contrôle immédiat : le contraste. Ici du blanc sur un bleu moyennement foncé. Ce n'est pas un détail décoratif, c'est une exigence d'accessibilité : le texte doit rester lisible pour une personne malvoyante. Vérifiez le rapport de contraste texte/fond avec n'importe quel vérificateur de contraste et visez au minimum le seuil recommandé pour du texte normal. Si le contraste est trop faible, foncez le fond ou éclaircissez le texte avant de continuer.

Étape 3 — Donner un nom et une description accessibles

Le cœur du sujet. On ajoute deux éléments enfants de <svg> :

<title> : le nom court de l'image (l'équivalent d'un alt).
<desc> : une description plus longue du contenu.

<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="120" viewBox="0 0 220 120">
  <title>Badge SVG</title>
  <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>

Placez toujours <title> en premier enfant de <svg> : certaines aides techniques n'annoncent que le premier <title> rencontré, et sa position influence l'infobulle affichée au survol.

Écrivez une desc utile : décrivez la forme, la ou les couleurs et le message, pas « image » ou « logo ». Une bonne description répond à « qu'est-ce que je raterais si je ne voyais pas cette image ? ».

Étape 4 — Fiabiliser l'annonce avec les rôles ARIA

<title> et <desc> seuls ne suffisent pas partout : selon le navigateur et le lecteur d'écran, l'association n'est pas toujours faite. On l'explicite avec role="img" et aria-labelledby, qui pointent vers les id de nos deux éléments.

<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="120" viewBox="0 0 220 120"
     role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Badge SVG</title>
  <desc id="badge-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>

Ce qui se passe ici :

role="img" dit à l'aide technique : « traite ce bloc comme une seule image », sans détailler chaque cercle et chaque texte à l'intérieur.
aria-labelledby liste, dans l'ordre, les id qui composent le nom accessible. Ici le titre puis la description.
Les id doivent être uniques dans toute la page ; préfixez-les si vous intégrez plusieurs SVG.

Étape 5 — Cas particulier : le SVG purement décoratif

Toutes les images n'ont pas besoin d'être annoncées. Une forme purement décorative (séparateur, motif de fond) doit au contraire être ignorée par le lecteur d'écran, pour ne pas alourdir la navigation.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="8"
     viewBox="0 0 120 8" aria-hidden="true" focusable="false">
  <rect width="120" height="8" fill="#f2c94c"/>
</svg>

Règle simple : soit l'image porte du sens et vous lui donnez un nom (étapes 3-4), soit elle est décorative et vous la masquez avec aria-hidden="true". Jamais entre les deux.

Étape 6 — Vérifier (auto red-team)

Ne considérez pas le travail fini tant que vous n'avez pas contrôlé :

Rendu visuel : le SVG s'affiche comme prévu dans un navigateur.
Contraste : le texte visible passe le seuil recommandé.
Annonce : avec un lecteur d'écran, l'image est annoncée par son titre et sa description (et non lue élément par élément).
Décoratif : les images sans sens sont bien ignorées (aria-hidden).
id uniques : aucun doublon d'identifiant si plusieurs SVG cohabitent.
Zoom / réglages : le texte reste lisible à fort agrandissement.

Si un point échoue, revenez à l'étape correspondante.

À retenir

Un SVG neuf est muet : l'accessibilité est un ajout explicite.
<title> (nom) + <desc> (description) + role="img" + aria-labelledby forment le motif fiable pour une image porteuse de sens.
aria-hidden="true" pour tout ce qui est décoratif.
Le contraste du texte visible fait partie de l'accessibilité, pas seulement le balisage.
Rien n'est terminé sans la vérification finale.

Pour aller plus loin

Rendez le SVG interactif (lien, bouton) : il faudra alors gérer le focus clavier et un nom accessible sur l'élément cliquable.
Décrivez un graphique complexe : une desc détaillée, voire un tableau de données en complément, vaut mieux qu'une image seule.