Free scan

Fix "SVG image without text alternative" in HTML

Why it's a problem

An <svg role="img"> is announced as an image. With no <title> and no aria-label the screen reader has nothing to say: a logo, a chart or an action icon becomes an anonymous image.

How to fix it — HTML

Add a <title> as the SVG's first child and reference it with aria-labelledby (support for <title> alone varies between screen readers), or put aria-label on the <svg>. A purely decorative SVG gets aria-hidden="true" and no role="img".

Avoid
<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>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes