Scan gratuit

Corriger « Image SVG sans alternative textuelle » en HTML

Pourquoi c'est un problème

Un <svg role="img"> est annoncé comme une image. Sans <title> ni aria-label, le lecteur d'écran n'a rien à dire : un logo, un graphique ou une icône d'action devient une image anonyme.

Comment corriger — HTML

Ajoutez un <title> en premier enfant du SVG et reliez-le avec aria-labelledby (la prise en charge du <title> seul varie selon les lecteurs d'écran), ou mettez un aria-label sur le <svg>. Un SVG purement décoratif prend aria-hidden="true" et pas de role="img".

À éviter
<svg role="img" viewBox="0 0 24 24">
  <path d="…"/>
</svg>
Correct
<svg role="img" viewBox="0 0 24 24" aria-labelledby="logo-titre">
  <title id="logo-titre">Conformly</title>
  <path d="…"/>
</svg>

<!-- Décoratif : -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="…"/></svg>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections