Does the <canvas> element have alt text?

Goal

Ensure that we are providing text alternatives for people who can’t see the canvas.

Why this matters

• Assistive technology provides the alternative text to people using screen readers or Braille displays.

How to implement

Writer

• See Image alt text and SVG titles for forging the words themselves.
• Be sure that the alt text describes the content of the canvas. Making the alt text “Your browser doesn’t support canvas” doesn’t help the user finish their task.
• If the canvas represents complex content, write a long description as well.

UX Designer

• Review Providing a location for a long description if the canvas represents complex content.

Developer

• Implement the text in one of two ways:
  • Add an aria-label or aria-labelledby attribute to the <canvas> element.
  • Put the alt text between the <canvas> opening and closing tags. For example:

<canvas>This is my alt text!</canvas>

How to test

1. Right-click and inspect the element in the browser’s developer tools. Ensure that the <canvas> has alt text using one of the three methods above, and that it’s set to a value.
2. Assuming it does, ensure that the value matches your Writer’s expectations.