SVG marked as an image has no name

Why it matters

An SVG with role="img" is announced as an image. Without a name, people hear "image" and nothing else.

How to fix it

Add an aria-label, or a <title> inside the SVG referenced by aria-labelledby. If it is decorative, use aria-hidden="true" and drop the role.

<!-- Before -->
<svg role="img" viewBox="0 0 24 24">...</svg>

<!-- After -->
<svg role="img" aria-label="Warning" viewBox="0 0 24 24">...</svg>

Related rules

• Image has no alt attribute (WCAG 1.1.1)
• Alt text looks like a file name (WCAG 1.1.1)
• Alt text starts with "image of" or similar (WCAG 1.1.1)
• Alt text is very long (WCAG 1.1.1)