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

Un bouton « Supprimer » avec une poubelle SVG à gauche du texte : le SVG reçoit aria-hidden="true" et n'a pas de title. validate-svg affiche un avertissement title/desc, ce qui est attendu. L'accessibilité repose sur le texte du bouton, pas sur l'icône.

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

Intégrez validate-svg à votre revue d'assets, surtout pour les icônes livrées par des designers qui ne testent pas avec des technologies d'assistance.

Les préréglages default et aggressive exécutent cleanupIds, qui peut supprimer ou raccourcir des id, donc vérifiez qu'un id utilisé par aria-labelledby survit (safe laisse les id intacts). Le préréglage aggressive fusionne en plus les paths, donc comparez toujours visuellement. svg-to-jsx conserve le markup, mais vérifiez que title/desc restent les premiers enfants du <svg> dans le composant React.

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.

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

Les tests automatisés de page (Pa11y, axe-core en CI, Lighthouse accessibilité) couvrent le DOM rendu, au-delà du fichier SVG source. Gardez validate-svg en amont sur les assets et ajoutez des tests E2E avec lecteur d'écran pour les parcours critiques.

Utilisez le même préréglage SVGO dans l'aperçu du navigateur et en CI. Après l'étape optimize du pipeline, extrayez un échantillon et passez-le dans validate-svg à la main. Voir SVGO presets et le guide optimisation SVG.

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

Une icône à côté d'un libellé visible (« Enregistrer », « Fermer ») n'apporte pas d'information supplémentaire : elle est purement visuelle. Les bonnes pratiques d'accessibilité recommandent de la masquer aux lecteurs d'écran avec aria-hidden="true" sur le <svg>, ou avec role="presentation". Dans ce cas, <title> et <desc> sont inutiles, voire contre-productifs s'ils répètent le texte voisin.

Un pictogramme seul (statut d'erreur sans texte, graphique inline, logo servant de lien sans texte alternatif) doit transmettre son sens. Deux options : <title> et éventuellement <desc> comme premiers enfants du <svg>, ou role="img" + aria-label / aria-labelledby sur l'élément SVG ou son composant React.

L'outil analyse le XML, exige une racine <svg>, signale un viewBox manquant par un avertissement et avertit quand <title> et <desc> sont tous deux sans texte. Ce sont des contrôles structurels de base, pas une simulation de lecteur d'écran, ni un contrôle de contraste, ni une validation ARIA complexe. Pour un audit complet, ajoutez axe DevTools ou WAVE.

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

Pour une icône informative, ajoutez par exemple <title>Erreur</title> juste après l'ouverture du <svg>. Si width et 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 les modifications.

Une fois la structure validée, passez à l'optimiseur SVGO (préréglage safe ou default pour les icônes d'interface). FastMinify conserve <title> et <desc> sur les trois préréglages : relancez validate-svg après l'optimisation pour le confirmer. Le minificateur SVG rapide ne touche qu'aux espaces et aux commentaires.