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.
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
How to test
Right-click the SVG and check to see if it has a
Accessible SVGs: Perfect Patterns For Screen Reader Users by Carie Fisher