SVG elements must have non-empty titles when used for meaning

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.

Meaningful SVGs need a real title; decorative SVGs must be hidden from AT.

Why this matters and how to fix it

Why this matters

Meaningful SVGs are often used as icons or data visuals. Without a text alternative, screen reader users cannot understand what the graphic represents, leading to missing or incomplete information.

How to fix this issue

If the SVG conveys meaning, include a <title> element with a concise description and reference it using `aria-labelledby`. If the SVG is decorative, mark it with `aria-hidden="true"` or `role="presentation"` so assistive technologies ignore it.

Automated detection · Manual review recommended

Developer guidance

Inline SVGs should contain a meaningful <title> for assistive technologies. For SVGs used via <img>, supply the description in the `alt` attribute instead. Never leave <title> empty—an empty title is treated the same as no accessible name.

Code examples

Incorrect Implementation

<svg role="img"><title></title><circle cx="10" cy="10" r="10"/></svg>

Correct Implementation

<svg role="img" aria-labelledby="chartTitle">
  <title id="chartTitle">Revenue growth chart</title>
  <circle cx="10" cy="10" r="10"/>
</svg>

Real-World Examples

Before

<svg role="img"><path d="..."></path></svg> <!-- Screen reader hears: 'graphic' with no context -->

After

<svg role="img" aria-labelledby="iconDesc">
  <title id="iconDesc">Download file</title>
  <path d="..." />
</svg> <!-- Screen reader announces: 'Download file, graphic' -->

Manual testing

  1. 1. Identify if the SVG conveys meaningful information (icon, status, UI action, chart).
  2. 2. If meaningful: confirm the SVG has a <title> with descriptive text.
  3. 3. If <title> exists, ensure it is not empty or placeholder (e.g., 'icon', 'graphic').
  4. 4. Confirm the SVG references the <title> using aria-labelledby, or provide description via alt if using <img>.
  5. 5. If the SVG is decorative, confirm `aria-hidden="true"` or `role="presentation"` is used.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance