Meaningful SVGs must have an accessible name

Rule svg-img-name · Images & non-text content · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An SVG that conveys information (especially one with role="img") must expose a name. A nested <title> element or aria-label gives screen-reader users the equivalent text. An SVG named only by a <title> child but missing role="img" still has a text alternative, so it passes — though adding role="img" is recommended so every screen reader reliably exposes it as an image. A roleless, unnamed SVG inside a link/button that is already named by its other content is decorative by context and is not flagged.

How to fix#

Add role="img" plus a <title> child or aria-label. If the SVG is purely decorative, add aria-hidden="true" and focusable="false".

Example#

<svg role="img" viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg>

<svg role="img" viewBox="0 0 10 10"><title>Company logo</title><path d="M0 0h10v10H0z"/></svg>

Example#

<svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg>

<svg viewBox="0 0 10 10"><title>Company logo</title><path d="M0 0h10v10H0z"/></svg>

A <title> child gives the SVG a text alternative even without role="img"; adding role="img" additionally makes screen readers expose it as an image.

Example#

<svg viewBox="0 0 24 24"><path d="M12 2L22 20H2z"/></svg>

<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2L22 20H2z"/></svg>

Example#

<button><svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg></button>

<button>Save <svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg></button>

An unnamed decorative SVG inside a control already named by its text is not flagged; icon-only controls still are (the host has no name).

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Accessible SVGs