The <canvas> Element
As defined in the HTML Living Standard, the <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
View HTML Living Standard: The canvas element
Accessibility Challenge: The Bitmap Problem
Because <canvas> is just a container for pixels, assistive technologies like screen readers cannot "see" what is drawn inside it. This makes it high-risk for accessibility.
WCAG Requirement: Non-text Content
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
You must provide fallback content inside the <canvas> tags. For complex charts or data, the fallback should be a table or a detailed text description of the data being visualized.
Interactive Canvas Best Practices
- Interactive Elements: If the canvas contains interactive buttons or links, you should place real HTML elements (like
<button>) inside the canvas tags. These elements will be hidden visually but remain available in the accessibility tree. - ARIA Roles: Use
role="img"and anaria-labelif the canvas is purely decorative or represents a single image. - Dynamic Updates: If the canvas content changes dynamically, use ARIA live regions to notify screen reader users of important state changes.
A11y Tip: High Contrast Mode
Pixels drawn in canvas are often ignored by operating system "High Contrast" or "Dark Mode" settings. Always check that your canvas drawings remain legible when these modes are enabled, or use the prefers-color-scheme media query to adjust your script's drawing colors.