Features
Start a free trial

Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text

Rule ID: svg-img-alt User Impact: serious Guidelines: WCAG 2.0

<svg> elements assigned the role="img" must include accessible text alternatives to convey their meaning and purpose to users relying on assistive technologies.

About This Rule

This guideline ensures that SVG elements with an img, graphics-document, or graphics-symbol role have accessible text alternatives, enhancing accessibility for users who rely on screen readers. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (A): 1.1.1 Non-text Content
  • WCAG 2.0 (A): 1.1.1 Non-text Content
  • WCAG 2.2 (A): 1.1.1 Non-text Content
  • 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)
  • Trusted Tester: 7.A - The accessible name and accessible description for a meaningful image provides an equivalent description of the image.
  • EN 301 549: 9.1.1.1 Non-text Content

Why It Matters

Non-text content, such as SVG images, needs text alternatives to be accessible to all users. Providing these alternatives ensures that information can be rendered through various sensory modalities—visual, auditory, or tactile—matching the needs of diverse users. For instance, a person who cannot see an image can have the text alternative read aloud using synthesized speech. This practice aligns with WCAG Success Criterion 1.1.1: Non-text Content. ([dequeuniversity.com](https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=RuleDescription&utm_source=chatgpt.com))

How to Fix

To enhance accessibility, implement one or more of the following methods:

  • Use the <title> Element: Include a <title> element within the SVG to provide a short, descriptive text.
    Copy code
    <svg role="img">
  <title>A descriptive title for the SVG element</title>
  <path d="...." />
</svg>
  • Use the aria-label Attribute: Add an aria-label attribute directly to the SVG element to define an accessible name.
    Copy code
    <svg role="img" aria-label="A red circle with black border">
  <circle cx="50" cy="50" r="40" stroke="black" fill="red"></circle>
</svg>
  • Use the aria-labelledby Attribute: Reference existing elements that contain the descriptive text using the aria-labelledby attribute.
    Copy code
    <div id="first">First</div>
<div id="name">Name</div>
<svg role="img" aria-labelledby="first name">
  <path d="...." />
</svg>

Examples

Incorrect

An SVG element with role="img" and no accessible text alternative:

Copy code
<svg role="img">
  <path d="...." />
</svg>

Correct

An SVG element with role="img" and a <title> element providing a text alternative:

Copy code
<svg role="img">
  <title>A descriptive title for the SVG element</title>
  <path d="...." />
</svg>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: