SVG accessibles : Guide complet pour le web

Les SVG (Scalable Vector Graphics) sont omniprésents sur le web moderne : icônes, illustrations, graphiques, logos. Mais par défaut, ils sont souvent invisibles aux lecteurs d'écran. Voici comment les rendre accessibles selon le contexte d'utilisation.

Les trois types de SVG

Avant de coder, identifiez le rôle de votre SVG :

[!NOTE] Le critère RGAA 1.1 exige une alternative textuelle pour toute image porteuse d'information. Les SVG informatifs sont concernés.

SVG décoratif : masquer proprement

Un SVG purement décoratif ne doit pas être annoncé par les lecteurs d'écran :

<svg aria-hidden="true" focusable="false">
  <use href="#decorative-pattern"></use>
</svg>

Pourquoi focusable="false" ?

Dans Internet Explorer et certaines versions d'Edge, les SVG pouvaient recevoir le focus clavier de manière inattendue. Cet attribut prévient ce comportement.

SVG informatif : la technique complète

Pour un SVG qui transmet une information, utilisez cette structure :

<svg role="img" aria-labelledby="svg-title svg-desc">
  <title id="svg-title">Chargement en cours</title>
  <desc id="svg-desc">Animation de trois points qui clignotent, indiquant un traitement en cours</desc>
  <!-- Contenu SVG -->
</svg>

Décryptage des attributs

• role="img" : Indique aux technologies d'assistance que ce SVG doit être traité comme une image
• aria-labelledby : référence les IDs des éléments fournissant le nom et la description
• <title> : équivalent du alt pour les images, fournit le nom accessible
• <desc> : description longue pour les SVG complexes

Pourquoi aria-labelledby plutôt qu'aria-describedby ?

Le support de aria-describedby pour le contenu de <desc> varie selon les navigateurs. En combinant <title> et <desc> dans aria-labelledby, vous garantissez une lecture cohérente.

SVG dans un bouton ou lien

Quand un SVG est à l'intérieur d'un élément interactif, c'est le parent qui doit porter le nom accessible :

<!-- Bouton avec icône seule -->
<button aria-label="Fermer la fenêtre">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-close"></use>
  </svg>
</button>

<!-- Lien avec icône et texte -->
<a href="/partager">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-share"></use>
  </svg>
  Partager cet article
</a>

Dans le second exemple, le texte visible suffit. L'icône est masquée car elle est redondante.

[!TIP] Consultez notre guide sur les icônes accessibles pour approfondir ce sujet.

SVG avec plusieurs éléments significatifs

Pour les illustrations complexes où plusieurs parties ont du sens :

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Répartition des ventes par région</title>
  <desc id="chart-desc">
    Graphique circulaire montrant : Europe 45%, Asie 30%, Amérique 20%, Autres 5%
  </desc>

  <g role="img" aria-label="Europe : 45%">
    <!-- Segment Europe -->
  </g>
  <g role="img" aria-label="Asie : 30%">
    <!-- Segment Asie -->
  </g>
  <!-- ... -->
</svg>

Pour les graphiques complexes, envisagez aussi un tableau de données accessible en complément.

SVG inline vs SVG externe

SVG inline (dans le HTML)

C'est la méthode recommandée pour l'accessibilité car vous avez un contrôle total :

<svg role="img" aria-labelledby="logo-title">
  <title id="logo-title">Logo de l'entreprise</title>
  <path d="..."/>
</svg>

SVG via <img>

Utilisez l'attribut alt standard :

<img src="logo.svg" alt="Logo de l'entreprise">

SVG via <object> ou <embed>

Ces méthodes sont déconseillées pour l'accessibilité. Le support est incohérent.

SVG en CSS background

Les images de fond sont considérées décoratives et ne peuvent pas avoir d'alternative textuelle. Réservez-les aux éléments vraiment décoratifs.

Icônes SVG avec sprite

Si vous utilisez un sprite SVG, voici le pattern accessible :

<!-- Définition du sprite (masqué) -->
<svg style="display: none">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- Utilisation -->
<button aria-label="Rechercher">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search"></use>
  </svg>
</button>

Animations SVG

Les animations peuvent poser des problèmes d'accessibilité :

1. Respectez prefers-reduced-motion :

@media (prefers-reduced-motion: reduce) {
  svg * {
    animation: none !important;
    transition: none !important;
  }
}

2. Fournissez une description de l'état final si l'animation transmet une information

3. Évitez les clignotements rapides (plus de 3 flashs par seconde) - critère RGAA 13.8

Couleurs et contraste dans les SVG

Les éléments graphiques significatifs doivent avoir un contraste de 3:1 minimum avec leur environnement :

<svg viewBox="0 0 100 100">
  <!-- Contraste suffisant -->
  <circle cx="50" cy="50" r="40" fill="#1a1a1a"/>
</svg>

Testez vos contrastes avec notre outil de vérification.

Erreurs courantes à éviter

1. Title sans aria-labelledby

Le <title> seul n'est pas lu par tous les lecteurs d'écran :

<!-- Insuffisant -->
<svg>
  <title>Description</title>
</svg>

<!-- Complet -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Description</title>
</svg>

2. role="img" sans nom accessible

<!-- Le rôle sans nom crée une image vide -->
<svg role="img">
  <path d="..."/>
</svg>

<!-- Toujours associer un label -->
<svg role="img" aria-label="Description courte">
  <path d="..."/>
</svg>

3. Icône visible ET texte dans aria-label

<!-- Duplication pour les lecteurs d'écran -->
<button aria-label="Envoyer">
  <svg><title>Envoyer</title>...</svg>
</button>

<!-- L'icône est masquée -->
<button aria-label="Envoyer">
  <svg aria-hidden="true">...</svg>
</button>

Checklist SVG accessibles

Critères RGAA concernés

Conclusion

Rendre vos SVG accessibles demande de comprendre leur rôle dans l'interface. Un SVG décoratif se masque, un SVG informatif se décrit, un SVG interactif délègue son label au parent. Avec ces patterns, vos graphiques vectoriels seront utilisables par tous.

Analysez l'accessibilité de vos SVG avec RGAA Checker : notre outil détecte automatiquement les images sans alternative textuelle et les problèmes de nommage.