SVG Images Must Have an Accessible Text Alternative

When you add an image to a website, whether it is a photo, an icon, or a shape, people who can see the screen can instantly recognise what it is. But when you use an <svg> element to create an image, a screen reader does not automatically know what that image means unless you provide a proper title or description.

An <svg> without a title is similar to an <img> without alt text. It leaves users who rely on screen readers without any context or understanding of what the image represents. Without this information, the screen reader may announce “image” or say nothing at all, making the visual content inaccessible.

That is why adding a text alternative for SVGs is important.

WCAG Success Criteria

1.1.1 Non-text Content (Level A)
All non-text content that is presented to the user must have a text alternative that serves the equivalent purpose.
This ensures that users who cannot see the content can still understand its meaning through assistive technologies.

4.1.2 Name, Role, Value (Level A)
All user interface components, including SVGs with interactive roles, must have a programmatically determinable name, role, and value.
This helps assistive technologies accurately convey information to users.

What Is an Accessible Text Alternative?

An accessible text alternative for an SVG is a concise description of what the SVG represents. It tells assistive technologies (such as screen readers) what the image or graphic is or what purpose it serves.

For example:

• A decorative line chart might say “Sales growth from 2020 to 2025.”
• A logo might say “Company logo.”
• An icon might say “Search” or “Close button.”

This description helps users who cannot see the screen understand what the visual element means.

The Solution

To make SVGs accessible, you must provide a text alternative that describes their purpose or meaning.
These techniques apply to inline SVGs in your HTML.
If your SVG is used through an <img> tag, use the standard alt attribute instead.
For SVGs used as background images, include the equivalent information as visible text elsewhere on the page.

There are several valid methods for giving an SVG an accessible name, and each serves a specific purpose.

1. Use a <title> Element

Add a <title> tag inside your <svg>. This is the most common and reliable method.

<svg role="img">
  <title>A brown circle</title>
  <circle cx="30" cy="30" r="10" fill="brown"></circle>
</svg>

A screen reader will announce: “A brown circle.”

The <title> element is the most reliable method for naming an SVG, as it is built into the SVG specification and supported by most browsers and assistive technologies. Use ARIA attributes only if a <title> is not practical.

2. Use a <desc> Element for Longer Descriptions

While <title> provides a short label, <desc> can offer a longer explanation for more complex graphics, such as charts or diagrams.

<svg role="img">
  <title>Sales growth chart</title>
  <desc>Line chart showing sales increasing steadily from 2020 to 2025.</desc>
</svg>

The <title> provides a quick summary, while the <desc> offers more context.
Screen readers will usually read both elements in order.

3. Use a title Attribute

You can also add a title attribute directly to the <svg> element.

<svg role="img" title="A brown circle">
  <circle cx="30" cy="30" r="10" fill="brown"></circle>
</svg>

This works similarly, although the <title> element inside the SVG is generally preferred for better accessibility support.

4. Use aria-label

This method assigns an accessible name using an ARIA attribute.

<svg role="img" aria-label="A red circle with a black border">
  <circle cx="50" cy="50" r="40" stroke="black" fill="red"></circle>
</svg>

Screen readers will announce: “A red circle with a black border.”

5. Use aria-labelledby

If there is already text elsewhere on the page that describes the SVG, you can link to it using aria-labelledby.

<div id="chartTitle">Sales Growth Chart</div>
<svg role="img" aria-labelledby="chartTitle">
  <path d="..."></path>
</svg>

The screen reader will read: “Sales Growth Chart, image.”

Common Mistakes to Avoid

1. No title or label

<svg role="img"></svg>

Screen readers do not know what this image is.

2. Empty <title>

<svg role="img"><title></title></svg>

There is a title element, but it provides no information.

3. Title inside another element

<svg role="img"><circle><title>Red circle</title></circle></svg>

This does not work. The <title> must be a direct child of <svg>.

4. Multiple <title> elements where the first is empty

<svg role="img">
  <title></title>
  <title>Company logo</title>
</svg>

Screen readers only read the first <title>, which is empty.

How to Fix the Problem

To make your SVG accessible:

• Add a meaningful <title> inside the <svg>.
• Or, use aria-label or aria-labelledby to describe the image.
• Use <desc> for longer explanations of complex graphics.
• Make sure the description is clear, short, and accurate.
• If the SVG is decorative, hide it with aria-hidden=”true” so it is skipped by screen readers. Remember that when aria-hidden=”true” is used, both the SVG and its contents are hidden from assistive technologies.

Testing Accessibility

You can test SVG accessibility using a screen reader such as NVDA, JAWS, or VoiceOver, or by checking your DOM with accessibility tools such as axe DevTools or WAVE.

Accessibility Standards

Providing text alternatives for SVGs supports WCAG 2.1 Success Criteria:

• 1.1.1 Non-text Content: Requires text alternatives for meaningful images.
• 4.1.2 Name, Role, Value: Ensures user interface components are programmatically accessible.

Wrapping Up

Adding a text alternative to SVGs ensures everyone, including users with visual impairments, can understand the meaning behind your images.

Without a name: “image” (confusing).
With a name: “Company logo” (clear and meaningful).

A single line of code can make your visuals accessible to all users. Always make sure your SVGs include a text alternative using <title>, <desc>, aria-label, or aria-labelledby.