The “SVG Accessible Name Check” evaluates whether all <svg> elements with an explicit ARIA role (e.g., role="img") have an accessible name, which is necessary for assistive technologies to convey the purpose or content of the SVG.
Example outcome
I noticed that all <svg> elements with an explicit role have accessible names.
Impact
Visual Impairments: Individuals with visual impairments rely on screen readers to interpret non-text content like icons, charts, and diagrams. If an SVG lacks an accessible name, its purpose is lost. May zoom in and rely on screen reader support when detail is difficult to perceive visually.
Cognitive Disabilities: Users may benefit from alternative text descriptions that reinforce the meaning of complex visuals.
Color Blindness: If the SVG conveys data via color (e.g., charts), color blind users can’t access a textual equivalent.
Fixes
To address <svg> elements with an explicit role missing an accessible name:
Locate the <svg> element missing an accessible name.
Add an accessible name to the element (i.e., add to it one of the attributes aria-label and aria-labelledby), providing a description of the function or content of the image.
If it is purely decorative, simply remove the role from it.