Canvas (<canvas>)

When To Use

• To draw graphics and animations. ¹

Rules

• Semantic HTML is preferred over canvas for accessibility because canvas content cannot be accessed by accessibility tools. Therefore, it is recommended to refrain from using canvas in an accessible website or app. ¹
• When still using the canvas element:
  • To ensure accessibility for screen readers, it is recommended to either provide internal fallback content or use ARIA semantics to create a text alternative for the content. ³
  • It is recommended to use the ARIA role="img" and aria-label="alt text" attributes to create a text alternative. ²
  • Another approach is to use internal fallback content, where you can include alternative text within the opening and closing tags of the image. ²
  • If a canvas is interactive, it is recommended that authors incorporate focusable elements within the fallback content of the canvas that correspond to each focusable aspect of the canvas. ³

Sources 

1. MDN: <canvas>: The Graphics Canvas element by Mozilla contributors is licensed under CC-BY-SA 2.5
2. Paul J Adam: HTML <canvas> Accessibility by Paul J. Adam is licensed under CC-BY-SA 2.5
3. HTML Spec: Living Standard, 4.12.5 The canvas element, best practices is licensed under Creative Commons Attribution 4.0 International License