SVG et accessibilité : valider title, desc et structure sans casser l'optimisation

Icônes décoratives vs informatives : règles WCAG, balises title/desc et validation rapide en ligne.

23.07.2026

9 min de lecture

Partager cet article:

SVG

accessibility

a11y

wcag

validation

Tutoriel

Pourquoi l'accessibilité SVG compte avant l'optimisation

Un SVG optimisé à −60 % ne sert à rien si un lecteur d'écran annonce « image » sans contexte, ou si une icône décorative pollue la navigation vocale. Les règles WCAG distinguent les SVG décoratifs (masqués aux technologies d'assistance) des SVG informatifs (titre ou description requis). L'validateur SVG en ligne de FastMinify vérifie la syntaxe, la présence de viewBox et l'absence de <title> / <desc> — avec des avertissements conseillés, pas un audit WCAG complet. Le tout tourne dans le navigateur sur le hub outils SVG, en amont ou après optimize SVG. Pour le contexte presets SVGO, voir l'article SVGO presets expliqués.

Distinction claire décoratif vs informatif (WCAG 1.1.1)

Validation syntaxe + viewBox + title/desc en temps réel

Avertissements conseillés — pas de faux sentiment de conformité totale

Compatible avec optimize-svg (title/desc préservés sur les presets)

Traitement 100 % local — idéal avant livraison design system

Exemples concrets : icônes UI et inline

Icône bouton avec libellé (décoratif)

Un bouton « Supprimer » avec une poubelle SVG à gauche du texte : le SVG reçoit <code>aria-hidden="true"</code>, pas de title. validate-svg affichera un warning title/desc — attendu. L'accessibilité repose sur le texte du bouton, pas sur l'icône.

Avant optimisation

Taille des fichiers :SVG avec title export Figma (~2,1 Ko)

Temps de chargement :—

Après optimisation

Taille des fichiers :aria-hidden + optimize default (~0,9 Ko)

Temps de chargement :—

Statut seul sans texte (informatif)

Un badge « succès » ou « erreur » représenté uniquement par un SVG doit avoir <code><title>Succès</title></code> ou un <code>aria-label</code> explicite sur le composant. validate-svg confirme la présence du texte ; testez ensuite au clavier et au lecteur d'écran.

Bonnes pratiques : WCAG, optimize et design system

Checklist avant mise en prod

Intégrez validate-svg dans votre revue d'assets — surtout pour les icônes livrées par des designers sans test AT.

Classer chaque icône : décoratif ou informatif (doc design system)

validate-svg : syntaxe + viewBox + title/desc si informatif

Test lecteur d'écran sur 2–3 icônes représentatives

optimize puis re-validate sur l'échantillon informatif

Versionner le SVG source avec ses métadonnées a11y

Pièges après SVGO ou conversion JSX

Le preset aggressive peut fusionner des paths ou retirer des IDs — rarement title/desc, mais toujours comparer visuellement. svg-to-jsx conserve le markup ; vérifiez que title/desc restent premiers enfants du <svg> dans le composant React.

Ne pas supprimer title « pour alléger » — optimize le fait déjà

aria-hidden + title : le title est ignoré par les AT — OK

Dupliquer le même title sur 50 icônes : préférer aria-label contextuel

Inline SVG dans HTML : minify-html ne remplace pas validate-svg

Hub SVG pour enchaîner validate, optimize, jsx

Limites honnêtes du validateur navigateur

FastMinify validate-svg est un filet de sécurité structurel, pas un substitut à un audit accessibilité de page entière. Contrastes, focus clavier, ordre de tabulation et alternatives longues restent votre responsabilité ou celle d'outils dédiés.

Warnings ≠ échec WCAG automatique

Decorative sans title : warning acceptable si aria-hidden

Pas de détection aria-hidden dans l'outil v1

Compléter avec tests utilisateurs ou axe/WAVE

Documenter la décision décoratif/informatif dans le PR

Quand l'outil navigateur suffit

Cas d'usage fréquents

Pas besoin d'installer svgo-cli ou un linter a11y lourd pour vérifier un export Figma avant merge.

Revue PR design system : batch d'icônes collées une par une

Debug d'un SVG inline qui casse le parseur XML

Contrôle viewBox avant responsive ou resize-svg

Vérification title/desc avant svg-to-jsx

Formation designers sur title vs aria-hidden

Compléter avec la CI et les audits AT

Ce que le navigateur ne remplace pas

Les tests automatisés de page (Pa11y, axe-core en CI, Lighthouse accessibility) couvrent le DOM rendu — pas seulement le fichier SVG source. Gardez validate-svg en amont sur les assets ; ajoutez des tests E2E avec lecteur d'écran pour les parcours critiques.

CI : svgo + snapshot visuel sur le dossier icons/

Storybook a11y addon sur les composants icônes

eslint-plugin-jsx-a11y pour aria-hidden / aria-label

Audit trimestriel WCAG niveau AA sur les templates

Pas de batch validate-svg dans FastMinify v1 — une icône à la fois

Aligner optimize et validation

Utilisez le même preset SVGO en preview navigateur et en CI. Après optimize en pipeline, extrayez un échantillon et passez-le dans validate-svg manuellement — voir <a href="/fr/blog/svgo-presets-optimiser-svg-web" class="text-primary hover:underline">SVGO presets</a> et le <a href="/fr/blog/guide-optimisation-svg-web" class="text-primary hover:underline">guide optimisation SVG</a>.

Preset safe/default pour assets avec title/desc

Re-validate après aggressive sur icônes informatives

Documenter la politique a11y du design system

Lien vers article SVG → React si composants

Hub SVG comme référence outils pour l'équipe

Outils complémentaires

Validateur structurel vs audit complet

FastMinify validate-svg cible le markup SVG source. D'autres outils couvrent la page rendue ou des normes plus larges.

FastMinify validate-svg

Syntaxe XML, viewBox, title/desc — navigateur, sans compte.

Avantages :

Feedback immédiat pendant l'édition

Stats SVG intégrées

Privacy-local

Inconvénients :

Pas d'audit WCAG page entière

Pas de simulation lecteur d'écran

axe DevTools / WAVE

Extensions navigateur pour audit accessibilité DOM.

Avantages :

Contrastes, ARIA, landmarks

Rapport WCAG orienté page

Inconvénients :

Ne valide pas un fichier .svg isolé aussi directement

Faux positifs possibles sur SVG inline complexe

SVGO + validate manuel

Pipeline CLI classique sans validate-svg.

Avantages :

Batch sur des centaines d'icônes

Config versionnée svgo.config.js

Inconvénients :

Pas de warning title/desc out of the box

Installation Node requise

Décoratif vs informatif : les règles de base

Quand le SVG est décoratif

Une icône à côté d'un libellé visible (« Enregistrer », « Fermer ») n'apporte pas d'information supplémentaire : elle est purement visuelle. WCAG recommande de la masquer aux lecteurs d'écran avec <code>aria-hidden="true"</code> sur le <code><svg></code>, ou un <code>role="presentation"</code> équivalent. Dans ce cas, <code><title></code> et <code><desc></code> sont inutiles — voire contre-productifs s'ils doublonnent le texte adjacent.

Icône + texte visible → aria-hidden sur le SVG

Pas de title/desc requis si le sens est déjà dans le DOM

validate-svg peut signaler l'absence de title — normal pour du décoratif

Ne pas confondre « pas de title » et « SVG cassé »

Tester avec VoiceOver / NVDA : l'icône ne doit pas être lue

Quand le SVG est informatif

Un pictogramme seul (statut erreur sans texte, graphique inline, logo lien sans alt texte) doit transmettre son sens. Options : <code><title></code> et optionnellement <code><desc></code> comme premiers enfants du <code><svg></code>, ou <code>role="img"</code> + <code>aria-label</code> / <code>aria-labelledby</code> sur l'élément SVG ou son wrapper React.

title court (nom de l'icône) ; desc pour le détail si nécessaire

Premiers enfants directs de svg — ordre recommandé par la spec

aria-labelledby pointant vers un id sur title

Graphiques de données : title + desc ou alternative textuelle longue

validate-svg avertit si title et desc sont absents ou vides

Ce que validate-svg vérifie (et ce qu'il ne vérifie pas)

L'outil parse le markup XML, exige une racine <code><svg></code>, signale un <code>viewBox</code> manquant (warning) et l'absence de texte dans <code><title></code> ou <code><desc></code> (warning). Ce sont des contrôles structurels de base — pas une simulation lecteur d'écran, pas de contraste couleur, pas de validation ARIA complexe. Pour un audit complet, complétez avec axe DevTools ou WAVE en plus du validateur navigateur.

Erreurs : XML mal formé, pas de racine svg, entrée trop volumineuse

Warnings : viewBox absent, title/desc absents ou vides

État valid_with_warnings : syntaxe OK, points a11y à trancher

Stats panel : dimensions, viewBox, présence title/desc

Pas de jugement « décoratif ou informatif » — vous décidez du traitement

Workflow FastMinify : valider, corriger, optimiser

Étape 1 — Coller et lire les diagnostics

Ouvrez l'outil validate SVG, collez votre markup ou chargez un fichier .svg. Les erreurs bloquent la livraison (XML invalide) ; les warnings vous invitent à ajouter viewBox ou texte descriptif selon le cas d'usage.

Coller, upload fichier ou charger l'exemple intégré

Lire le panneau résultats : erreurs vs avertissements

Stats : viewBox, title, desc, taille

Copier ou télécharger le SVG corrigé manuellement

Monaco editor pour éditer title/desc in-place

Étape 2 — Corriger title, desc et viewBox

Pour une icône informative, ajoutez par exemple <title>Erreur</title> juste après l'ouverture du <svg>. Si width/height existent sans viewBox, déduisez-en un (viewBox="0 0 24 24") ou passez par resize-svg sur le hub. Le beautifier SVG aide à relire la structure après édition.

title : libellé court pour lecteurs d'écran

desc : contexte supplémentaire si l'icône est ambiguë

viewBox : requis pour scaling responsive (warning sinon)

Décoratif : aria-hidden plutôt que title factice

Re-valider après chaque modification

Étape 3 — Optimiser sans supprimer l'accessibilité

Une fois la structure validée, passez à l'optimiseur SVGO (preset safe ou default pour les icônes UI). FastMinify préserve <title> et <desc> sur les trois presets — relancez validate-svg après optimize pour confirmer. Le minificateur SVG rapide ne touche qu'aux espaces et commentaires.

optimize safe/default : icônes avec title/desc

aggressive : éviter si title/desc critiques ou IDs référencés

Chaîne validate → optimize → validate

Article SVGO presets pour choisir le bon niveau

svg-to-jsx : vérifier que title/desc survivent à la conversion React

Conclusion

L'accessibilité SVG commence par une décision claire : décoratif (aria-hidden, pas de title) ou informatif (title/desc ou aria-label). validate-svg vous aide à sécuriser la syntaxe et la structure avant optimize SVGO — sans prétendre remplacer un audit complet. Enchaînez validation, optimisation et re-validation sur le hub SVG pour livrer des icônes légères et utilisables par tous.

Validez votre SVG maintenant

Classer décoratif vs informatif avant d'interpréter les warnings title/desc

validate → optimize (safe/default) → validate sur les icônes informatives

aria-hidden sur les icônes redondantes avec texte visible

Compléter avec tests lecteur d'écran sur les parcours critiques

Hub SVG + article SVGO presets pour la chaîne complète

Partager cet article

Partager cet article: