Alt des SVG : guide d'accessibilité inline

Trois cas d'usage pour les SVG : décoratif, informatif, interactif

Un SVG décoratif accompagne un texte sans rien lui apporter (filet, ombre, motif). Un SVG informatif remplace ou enrichit un contenu textuel (icône à côté d'un libellé, schéma). Un SVG interactif est cliquable ou focusable (bouton, lien, contrôle). Les trois cas demandent des traitements différents, à choisir selon l'intention. Le critère WCAG 1.1.1 (Contenu non textuel, niveau A) impose une alternative pour tout SVG non décoratif ; le critère 4.1.2 (Nom rôle valeur, niveau A) impose un nom accessible pour tout composant interactif.

SVG décoratif : masquer proprement aux technos d'assistance

Pour un SVG purement ornemental, visez le silence complet : aria-hidden=true et focusable=false empêchent respectivement sa lecture par les lecteurs d'écran et sa prise de focus clavier. Évitez de placer un texte dans title à l'intérieur du SVG décoratif : certains lecteurs d'écran (JAWS anciens) le restitueraient malgré aria-hidden. Pour un SVG décoratif inclus via use, appliquez le même couple d'attributs sur l'élément racine. Si la maquette l'exige, vous pouvez aussi le rendre invisible au focus clavier avec tabindex=-1 sur un wrapper.

SVG informatif simple : role=img et aria-label court

Quand le SVG remplace un libellé (icône dans un bouton texte seul, pictogramme d'un statut), attribuez-lui role=img et un aria-label court décrivant sa fonction. Ne mettez pas le nom visible : il sera ré-annoncé par le lecteur d'écran. Pour une icône de recherche, aria-label=Rechercher suffit. Pour deux icônes côte à côte, distinguez-les par aria-label différents (Fermer et Aide) même si elles se ressemblent visuellement.

SVG informatif complexe : aria-labelledby + description détaillée

Pour un schéma, un organigramme ou une infographie SVG, seule une étiquette courte ne suffit pas. Renseignez role=img et un aria-labelledby pointant vers un identifiant unique dans le document, idéalement porté par un titre visible ou par le premier texte du SVG. Pour la version complète, placez à proximité du SVG une description détaillée (paragraphe adjacent, lien vers une page dédiée, ou tableau de données équivalent).

SVG interactif : focus clavier, activation et état

Un SVG dans un bouton ou un lien doit être focusable et activable. Trois patterns : (1) enveloppez le SVG dans un button ou un a natif, avec aria-label sur le bouton. (2) sur le SVG lui-même, ajoutez role=button, tabindex=0 et gérez Entrée/Espace + Espace en JavaScript. (3) pour un lien, role=link + tabindex=0. L'état (déplié / replié, sélectionné) se gère via aria-expanded ou aria-pressed. Le critère WCAG 2.1.1 (Clavier, niveau A) impose l'activation clavier.

Compatibilité lecteurs d'écran : NVDA, JAWS, VoiceOver

Le comportement varie selon le lecteur et le navigateur : NVDA + Firefox role=img + aria-label fonctionne. VoiceOver + Safari gère title et desc mais préfère aria-labelledby. JAWS + Chrome ancien est parfois muet sans title explicite. Testez plusieurs combinaisons. Un diagnostic gratuit détecte les SVG muets, mais seul un test humain sur vos lecteurs cibles valide réellement la conformité.

Questions fréquentes

SVG inline ou img SVG : que choisir ?

Préférez SVG inline pour les icônes d'interface stylables en CSS. Utilisez img SVG pour les illustrations statiques sans interaction, profitant de l'attribut alt natif. Pour les SVG décoratifs inline, massez via aria-hidden.

aria-label ou title dans le SVG ?

Préférez aria-label sur le SVG racine avec role=img : c'est ce que les lecteurs d'écran consultent en priorité. Le title interne sert d'appoint pour l'infobulle au survol, mais ne comptez pas dessus pour l'accessibilité. En doublant, vous couvrez les lecteurs anciens comme JAWS.

SVG dans un bouton : quel pattern ?

Placez le SVG en enfant direct du button, sans aria-hidden : le texte du bouton (ou son aria-label) sera annoncé et le SVG sera ignoré. Si le bouton n'a pas de texte visible, ajoutez aria-label sur le button. Le SVG n'a pas besoin de role=img, son parent porte déjà le rôle.

Comment tester rapidement mes SVG ?

Naviguez au clavier seul sur toutes vos pages : chaque SVG interactif doit recevoir un focus visible. Avec NVDA + Firefox, parcourez votre page en mode navigation : chaque SVG informatif doit être annoncé avec son nom accessible. Une page silencieuse sur ces points révèle des SVG sans role ni label.

Les animations SVG restent-elles accessibles ?

Les animations purement décoratives doivent respecter prefers-reduced-motion via une media query CSS. Pour les animations porteuses d'information, garantissez un état final accessible et idéalement une alternative statique téléchargeable, conformément au critère WCAG 2.3.3.

Conventions typographiques et accessibilité des SVG ?

Pour les SVG contenant du texte stylisé (titres vectoriels, diagrammes annotés), utilisez les balises text et tspan du SVG plutôt que de convertir le texte en chemins : cela préserve la lisibilité, le zoom, la sélection, et la traduction par les lecteurs d'écran. Les textes vectorisés en chemins perdent toute accessibilité.

L'EAA privé impose-t-elle des exigences sur les SVG ?

Depuis le 28 juin 2025, l'EAA impose le niveau WCAG 2.1 AA aux services numériques privés sous contrôle de la DGCCRF. Les SVG muets ou sans nom accessible contreviennent aux critères 1.1.1 et 4.1.2, exposant à des sanctions de 7 500 € à 15 000 € en cas de manquement.