svg-img-alt

Description

The svg-img-alt rule ensures that SVG elements that serve as images have an appropriate accessible name. SVGs are frequently used as icons, logos, charts, and illustrations. When an SVG conveys meaningful information but has no accessible name, screen reader users receive no description of its content, making the visual information completely inaccessible to them.

This rule meets WCAG requirements by:

1. Providing Text Alternatives (WCAG 1.1.1 Non-text Content): It ensures that all SVG elements used as informative images have a text alternative that communicates their purpose or content to users who cannot see them.
2. Programmatic Name Determination (WCAG 4.1.2 Name, Role, Value): It ensures that the name of every SVG used as an image can be programmatically determined by assistive technologies.

To comply with this rule, add a <title> element inside the SVG as its first child and reference it with aria-labelledby, or use aria-label directly on the SVG element. For decorative SVGs, add aria-hidden="true" to exclude them from the accessibility tree.

Examples

This example shows an SVG with role="img" that has no accessible name. Screen readers announce it as “image” without any description of what it represents.

Here, a <title> element is added as the first child of the SVG and referenced with aria-labelledby, providing a meaningful accessible name that screen readers announce.

How to fix?

To fix violations of the svg-img-alt rule, follow these steps:

• Add a <title> element as the first child of the SVG, with a text description of what the SVG represents, and set aria-labelledby on the SVG to the id of the <title> element.

• Alternatively, add aria-label directly on the SVG element with a concise, meaningful description of the image’s content or purpose.

• For purely decorative SVGs that convey no information, such as background patterns or visual embellishments, add aria-hidden="true" to exclude them from the accessibility tree entirely.

• Ensure role="img" is present on the SVG element when it is used as an image, so assistive technologies treat it correctly as an image and not as a generic container.

Reference

• WCAG Success Criterion 1.1.1: Non-text Content

• WCAG Success Criterion 4.1.2: Name, Role, Value