← All rules

Text alternatives

SVG images need a name

• Rule: svg-img-alt
• Severity: Serious
• WCAG level A

Why it matters

An <svg> marked role="img" is announced as an image with no description, so an inline icon or chart conveys nothing.

How to fix it

1. Add a <title> element as the first child of the <svg>.
2. Or use aria-label on the <svg> itself.
3. For a decorative icon next to visible text, remove role="img" and add aria-hidden="true" instead.

In markup

<svg role="img" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

<svg role="img" viewBox="0 0 24 24">
  <title>Download</title>
  <path d="..."/>
</svg>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 1.1.1 Non-text Content (opens in new tab) — WCAG level A

Further reading

Deque University on svg-img-alt (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.