Start scanning free

( Perceivable / WCAG 1.1.1 )

SVG image has no accessible label

This check maps to Non-text Content. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level A WCAG 1.1.1 — Non-text Content

What’s wrong

An inline SVG that conveys meaning has no <title>, aria-label, or aria-labelledby to describe it.

Why it matters

Inline SVGs don’t have an alt attribute like <img> elements. Without an accessible label, screen readers either ignore the SVG entirely or read out raw SVG markup, which is meaningless. Charts, infographics, and icon-only buttons built with SVG all need labels.

How to fix it

For informative SVGs, add a <title> as the first child and reference it with aria-labelledby. For decorative SVGs, use aria-hidden="true".

Before
<svg viewBox="0 0 400 200">
  <!-- chart paths -->
</svg>

<button>
  <svg viewBox="0 0 24 24">
    <path d="M..." />
  </svg>
</button>
After
<!-- Informative SVG -->
<svg viewBox="0 0 400 200" role="img" aria-labelledby="chart-title">
  <title id="chart-title">
    Bar chart: Q3 revenue. APAC $2.1M, EMEA $1.8M, Americas $3.4M.
  </title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG in button -->
<button aria-label="Close dialog">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M..." />
  </svg>
</button>

Add focusable="false" to SVGs to prevent them receiving keyboard focus unexpectedly in older browsers.

Learn more