Rule ID: ace-img-svg-alt

Check that SVG elements used as images have appropriate accessible text through title or aria-label

WCAG 2.0 (A) - WCAG 2.2 (A) 1.1.1: Non-text Content Blind Deafblind. Mobility Legal Risk

What This Rule Checks

When navigating a website, users relying on screen readers can’t interpret visual elements like SVG images unless those images have text descriptions. For SVGs to be accessible, you need to provide text alternatives that explain what the image represents. This helps users with visual impairments understand the content and purpose of each image.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind. Mobility users, who have deafblind. mobility-related needs.

Why This Matters

SVG elements used as images must have accessible text for screen reader users. Without it, the SVG is either announced as “image” with no description or skipped entirely, depending on the screen reader.

How to Fix

Fix it yourself

Ensure that SVG elements with role=”img” are accessible

Developer Fix (For Websites with Development Teams)

Ensure all SVG elements are accessible, use one or a combination of the following methods to provide a name or description for the SVG.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- SVG image with no accessible name -->
<svg role="img">
  <circle
    cx="50"
    cy="50"
    r="40"
    fill="green"/>
</svg>

Copy

Correct Markup Solutions:

Code example

<!-- SVG with title element -->
<svg
  role="img"
  aria-labelledby="svg-title">
  <title id="svg-title">Status: Active</title>

  <circle
    cx="50"
    cy="50"
    r="40"
    fill="green"/>
</svg>

<!-- SVG with aria-label -->
<svg
  role="img"
  aria-label="Download complete">
  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>

Copy

Common Mistakes to Avoid

Using role=”img” without any accessible name.
Adding a <title> element without connecting it via aria-labelledby.
Not hiding decorative SVGs with aria-hidden=”true”.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: When writing alt text, describe the image’s function and meaning, not just its appearance. For complex images like charts, provide a brief alt attribute and a longer description in surrounding text or a linked resource.

Related WCAG Criteria

1.1.1: Non-text Content