Does the <canvas> element have alt text?


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


  • 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


  • 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.