Fix "role=img element without alternative" in HTML
Why it's a problem
role="img" declares an element to be an image: the screen reader announces it as such and ignores its content. Without an accessible name it only says “image”, nothing about what it shows — typical of icon fonts and CSS background images.
How to fix it — HTML
Name it with aria-label (or aria-labelledby pointing to visible text). If the image is decorative, drop role="img" and hide it with aria-hidden="true". For a real content image, a plain <img alt="…"> is simpler.
<span class="icon icon-alerte" role="img"></span><!-- 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éeCheck your site in 30 seconds
Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.
Free scan