Does the <canvas> element have role=”img”?

Goal

Ensure that canvas elements being used to display graphics identify themselves as images for screen reader users and other scenarios.

Why this matters

Assistive technology can’t tell what’s inside the <canvas> element so it can’t guide the user.

When role="img" is attached to the canvas, 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 <canvas> element.

How to test

Right-click the canvas and check to see if it has a role=”image” attribute.