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.
- Review Providing a location for a long description if the canvas represents complex content.
- Implement the text in one of two ways:
- Add an
aria-labelledbyattribute to the
- Put the alt text between the
<canvas>opening and closing tags. For example:
- Add an
<canvas>This is my alt text!</canvas>
How to test
- 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.
- Assuming it does, ensure that the value matches your Writer’s expectations.