Meaningful SVG icon with no name

WCAG 1.1.1 (A) · EN 301 549 9.1.1.1

There is an SVG marked as an image (role="img") or otherwise meant to have a name, but with no accessible name.

Why it matters

An SVG that conveys information and has no name is invisible to a screen reader. Purely decorative icons are not the problem; the problem is the icon that does mean something, like the secure-payment padlock or the "sustainably made" mark.

How to fix it

If the icon carries information, add a <title> inside the SVG or an aria-label. If it is decorative, mark it aria-hidden="true" and make sure the visible text already says what is needed.

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

<svg role="img" aria-label="Secure payment" viewBox="0 0 24 24"><path d="…"/></svg>

<!-- Decorative, next to text that already explains it -->
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="…"/></svg> Free shipping

Related

• Images with no alternative text
• Alternative text that carries no information
• Image button with no alternative text
• Image map area with no name