• June 30, 2025

Accessible SVG Elements with Descriptive Alternatives

Rule ID: svg-img-alt
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

SVG elements embedded directly into HTML must include accessible text alternatives. You can accomplish this using one of the following methods:

1. Use the <title> Element Inside <svg>

The <title> tag provides a short, descriptive text alternative. It should be the first child of the <svg> element and must contain meaningful content.

2. Use the title Attribute

While less commonly recommended than the <title> element, some browsers support the title attribute on the <svg> element.

3. Use the aria-label Attribute

Use this to directly provide an accessible label to the element. This is especially useful for inline SVG elements.

4. Use the aria-labelledby Attribute

This approach references one or more element IDs that describe the SVG’s meaning.

Best Practices:

• Ensure the title or label is concise, meaningful, and descriptive.

• Do not rely solely on visual appearance to convey meaning—communicate it in the accessible name.

• Use only one <title> element within each SVG, and avoid placing it inside child elements like <g> or <circle>.

Why it Matters

Non-text content, such as SVG graphics, must be perceivable by all users. People using screen readers or other assistive technologies rely on accessible text alternatives to understand visual information. Providing an accessible name ensures that:

• Screen readers can vocalize what the SVG represents.

• Users with low or no vision can interact with or understand your content.

• Information is conveyed consistently across platforms and assistive tools.

Without a proper accessible name, an SVG might be skipped or announced as simply “graphic,” leading to confusion or incomplete information for the user.

Rule Description

This rule ensures that any SVG element acting as an image (role="img", graphics-document, or graphics-symbol) includes a meaningful accessible name. This can be achieved via the <title> element, title attribute, aria-label, or aria-labelledby.

The Algorithm (in Simple Terms)

The rule checks whether the SVG contains an appropriate title or label:

• ✅ Passes if:

  • It has a direct <title> child with non-empty content.

  • The <title> contains text (even if nested in elements like <g>).

• ❌ Fails if:

  • There is no <title> element.

  • The <title> is empty or contains only whitespace.

  • The <title> is placed inside a nested child (like inside <circle>).

  • There are multiple <title> elements and the first one is empty.