svg-img-alt
Web validation
img, graphics-document, or graphics-symbol role must have an accessible name.An SVG with an img, graphics-document, or graphics-symbol role represents meaningful visual information. Without an accessible name provided by aria-label, aria-labelledby, or a <title> element, assistive technologies cannot convey that meaning to people who cannot see the graphic. Adding a short, accurate text alternative ensures the graphic’s purpose is available to screen reader users.
Pass Patterns
Accessible name via aria-label
The aria-label gives the SVG a programmatically discernible text alternative that screen readers announce.
<svg viewBox="0 0 65 65" aria-label="Circles" role="img">
<ellipse rx="30" ry="30" transform="translate(32.5 32.5)" fill="none" stroke="#000" stroke-width="4"/>
<ellipse rx="20" ry="20" transform="translate(32.5 32.5)" stroke-width="0"/>
</svg>Accessible name via <title> + aria-labelledby
The <title> element is referenced by aria-labelledby, so assistive technologies expose “Circles” as the element’s name.
<svg viewBox="0 0 65 65" aria-labelledby="svg-logo-title" role="graphics-symbol">
<title id="svg-logo-title">Circles</title>
<ellipse rx="30" ry="30" transform="translate(32.5 32.5)" fill="none" stroke="#000" stroke-width="4"/>
<ellipse rx="20" ry="20" transform="translate(32.5 32.5)" stroke-width="0"/>
</svg>Fail Patterns
No text alternatives
Because the SVG lacks aria-label, aria-labelledby, or a <title>, it has no accessible name.
<svg viewBox="0 0 65 65" role="graphics-symbol">
<ellipse rx="30" ry="30" transform="translate(32.5 32.5)" fill="none" stroke="#000" stroke-width="4"/>
<ellipse rx="20" ry="20" transform="translate(32.5 32.5)" stroke-width="0"/>
</svg>Empty <title> element
An empty <title> provides no useful information, so assistive technologies still announce nothing.
<svg viewBox="0 0 65 65" role="img">
<title></title>
<ellipse rx="30" ry="30" transform="translate(32.5 32.5)" fill="none" stroke="#000" stroke-width="4"/>
<ellipse rx="20" ry="20" transform="translate(32.5 32.5)" stroke-width="0"/>
</svg>WCAG techniques
Sufficient techniques
- ARIA6: Using aria-label to provide labels for objects
- ARIA10: Using aria-labelledby to provide a text alternative for non-text content
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G95: Providing short text alternatives that provide a brief description of the non-text content
Failure techniques
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Navigate to the graphic.
- Listen to the screen reader announce its name.
Expected result: You hear the text alternative (for example, “Circles”).
Actual result: If nothing is announced or the name is incorrect, the SVG fails.
Inspecting the browser dev-tools
- Open the browser’s Accessibility pane.
- Select the SVG element.
- Verify that the Name property matches the intended alternative text.
Expected result: The Name field shows the descriptive text.
Actual result: A blank or missing name indicates failure.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires every non-text element, including SVGs functioning as images, to expose an equivalent text alternative. Without it, users of assistive technologies cannot perceive the content at all.
Why is this issue marked as Serious?
When an SVG lacks alternative text, critical information becomes invisible to people who rely on screen readers or other assistive technologies. Because the barrier prevents basic understanding rather than merely lowering efficiency, the impact is high across browsers and platforms.
What if the image is purely decorative?
Use role="presentation" instead of role="img", role="graphics-document" or role="graphics-symbol" (or use aria-hidden="true") so assistive technology will ignore it.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 1.1.1-meaningful-image-name, 7.A | The accessible name and accessible description for a meaningful image provides an equivalent description of the image. |
| 508 Trusted Tester | 1.1.1-decorative-image, 7.B | There is no accessible name and accessible description for a decorative image. |