SVG accessible name is missing
| Field | Value |
|---|---|
| Rule code | Svg_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
We found an SVG element (Scalable Vector Graphic) that is likely missing an accessible name. SVG structures should contain a child title element that serves as the overall accessible name. Without an accessible name, the purpose and information conveyed through the SVG may not be announced accessibly with assistive technologies.
How to fix
If the SVG is meaningful, add a child <title> tag with good label-text. The label-text should describe the purpose of the SVG and any important visual details. Alternatively, add an aria-label or aria-labelledby attribute:
<a href="contact.html">
<svg aria-label="Contact us">…</svg>
</a>
If the image is not informative or is redundant with adjacent text, mark the image as decorative. Use aria-hidden="true":
<a href="contact.html">
<svg aria-hidden="true">…</svg>
Contact us
</a>