If the image is an SVG does it have role=”img”?


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