Scan gratuit

Corriger « Élément role=img sans alternative » en HTML

Pourquoi c'est un problème

role="img" déclare qu'un élément est une image : le lecteur d'écran l'annonce comme telle et ignore son contenu. Sans nom accessible, il n'annonce qu'« image », sans rien dire de ce qu'elle montre — typique des icônes en police ou des images CSS en arrière-plan.

Comment corriger — HTML

Donnez-lui un nom avec aria-label (ou aria-labelledby vers un texte visible). Si l'image est décorative, retirez role="img" et masquez-la avec aria-hidden="true". Si c'est une vraie image de contenu, un <img alt="…"> est plus simple.

À éviter
<span class="icon icon-alerte" role="img"></span>
Correct
<!-- Image porteuse d'information : un nom -->
<span class="icon icon-alerte" role="img" aria-label="Alerte : régression détectée"></span>

<!-- Icône décorative à côté d'un texte : masquée -->
<span class="icon icon-alerte" aria-hidden="true"></span> Régression détectée

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