Goal
Ensure that SVG images identify themselves as images for screen reader users and other scenarios.
Why this matters
Some assistive technology doesn’t know what to do with an SVG. This includes Voiceover, which announces that an <svg> or an <img> with an .svg source is a “group” instead of an image.
While the assistive tech makers work out their bugs, we add role=”image” to the SVG so that the SVG is identified as an image.
Additionally, when role="img" is attached to the SVG, screen readers can list the image on the list of all images on the page. Screen reader users can navigate to the image when navigating through graphics.
How to implement
Ensure that a role="image" attribute is present in the <svg> or <img> element.
How to test
Right-click the SVG and check to see if it has a role=”image” attribute.
Additional Resources
Accessible SVGs: Perfect Patterns For Screen Reader Users by Carie Fisher