Using <canvas> accessibly

This should probably be titled “Don’t use canvas” but I’m in hopes the situation will get better over time and this document will get updated accordingly.

As of October, 2020, Deque recommends against the use of Canvas because:

• The canvas element’s contents do not scale like SVGs.
• The canvas’s contents are not accessible to screen readers. You will have to add accessibility with JavaScript or ARIA on the <canvas> element itself.
  • SVG elements allow for interactive content and custom controls, because an <svg> has internal accessibility semantics and the ability to add interactivity with Javascript.
• Text within a canvas element is actually rendered as an image that pixelates when enlarged.
• Text within a canvas element can’t be customized by the user via CSS like SVG text (when implemented properly) can.
• The canvas element must have an accessible name and description that matches the visible text and content inside the canvas drawing area.
• Interactivity such as custom UI controls used within the canvas must have accessibility roles associated with them.