Missing SVG Accessible Name Check

Description

The “Missing SVG Accessible Name Check” evaluates whether there is any <svg> element with an explicit ARIA role without an accessible name.

Example outcome

I identified 1 <svg> element with an explicit role without an accessible name.

Impact

• Visual Impairments: Screen readers will not announce the purpose or meaning of the SVG. The content is ignored. Users relying on screen magnifiers and text-to-speech can’t get alternative descriptions.
• Cognitive Disabilities: Users who need reinforced textual explanation for visual content may not understand its purpose.
• 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:

1. Locate the <svg> element missing an accessible name.
2. 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.
3. If it is purely decorative, simply remove the role from it.

Resources

• WCAG 2.2: Understanding Success Criteria 1.1.1
• WCAG 2.2 Techniques: Technique G202: Ensuring keyboard control for all functionality
• WebAIM: Introduction to ARIA - Accessible Rich Internet Applications