<svg role="img"> must have an accessible name

WCAG 1.1.1
Non-text Content

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If the SVG means something → name it. If it means nothing → hide it.

Why this matters and how to fix it

Why this matters

When an inline <svg> is given role="img", assistive technologies treat it like an image. Without an accessible name, screen readers announce nothing — users have no idea what the graphic represents. This is especially critical for icons used as controls (e.g., download, delete, search), where missing names make the interface unusable for non-visual users.

How to fix this issue

Provide a meaningful accessible name using `aria-label`, `aria-labelledby`, or an internal <title> element. If the SVG is decorative, remove `role="img"` entirely and add `aria-hidden="true"`.

Automated detection · Manual review recommended

Developer guidance

In your icon or SVG component, require a `label` prop for meaningful icons. For decorative icons (chevrons, arrows, list bullets), explicitly set `aria-hidden="true"`. Do not use empty <title> elements — if you include <title>, it must contain real text.

Code examples

Incorrect Implementation

<svg role="img" viewBox="0 0 10 10"></svg>

Correct Implementation

<svg role="img" aria-label="Company logo" viewBox="0 0 10 10"></svg>

Real-World Examples

Before

<button>
  <svg role="img"><use href="#icon-trash"></use></svg>
</button>
<!-- Screen reader: 'Button' (no meaning) → user doesn't know this deletes something -->

After

<button aria-label="Delete item">
  <svg aria-hidden="true"><use href="#icon-trash"></use></svg>
</button>
<!-- Screen reader: 'Delete item, button' → clear purpose -->

CSS Example (Guidance)

/* Provide a visually-hidden text label when icon-only is used */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Manual testing

  1. 1. Inspect all <svg> elements.
  2. 2. If the SVG has role="img", confirm one of the following is present:
  3. • aria-label
  4. • aria-labelledby
  5. • <title> with meaningful text
  6. 3. If the SVG is decorative (pure visual styling):
  7. • Remove role="img" and add aria-hidden="true".
  8. 4. Test with a screen reader:
  9. • Expected announcement: meaningful name + control role (if part of a button/link).
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance