Back to Info and Examples for Accessibility Insights for Web

svg-img-alt

An <svg> element with an image or graphics role must have alternative text.

Why it matters

An <svg> element is a container for images and graphics. Alternative text is text that conveys the meaning of non-text content, such as icons, photos, illustrations, and graphs. Because assistive technologies can't interpret an image directly, they rely on alternative text to communicate the image's meaning to users. When an <svg> element marked with role="img", role="graphics-document", or role="graphics-symbol" doesn't have alternative text, people who use assistive technologies have no way of knowing what it means.

How to fix

For each <svg> element with role="img", role="graphics-document", or role="graphics-symbol", provide an accessible name using one of the following methods.

Good

title attribute
child <title> element

Better

aria-label attribute

Best

aria-labelledby attribute

Example

Fail

This <svg> element contains a red circle and has a role attribute to indicate that it contains an image. But because the <svg> element doesn't have alternative text, people who use assistive technologies won't know what image it represents.

<svg role="img" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red">
</circle>
</svg>

Pass

The <svg> element gets alternative text through an aria-labelledby element referencing visible text in a paragraph. All users can tell that the image is a red circle.

<p id="circle">A red circle</p>
<svg role="img" width="100" height="100" aria-labelledby="circle">
<circle cx="50" cy="50" r="40" fill="red">
</circle>
</svg>

About this rule

This rule passes if:

ANY of the following are true:
- Element has an aria-labelledby attribute that references elements that are visible to screen readers
- Element has a non-empty aria-label attribute
- Element has a non-empty child <title> element
- Element has a non-empty title attribute

More examples

Understanding Success Criterion 1.1.1: Non-text Content