Français

<canvas>

Draw at pixel level: the only element screen readers cannot read

— 1 min read

  • HTML
  • accessibility
  • semantics

<canvas> — The drawing surface

The <canvas> element creates a pixel surface manipulated by JavaScript. Games, real-time charts, image editors: anything requiring pixel-by-pixel rendering goes through <canvas>. But its content is invisible to screen readers — it is a black box.

When to use it

You want to draw an interactive chart, a game, a real-time data visualization, or an image editor. The content is generated by JavaScript, not by semantic HTML. If you can express your content with SVG or HTML, prefer them — they are natively accessible.

What you gain

Accessibility: nothing by default. The content of a <canvas> is opaque to assistive technologies. You must provide fallback content between the opening and closing tags, or use the accessible canvas API (still poorly supported). This is the main drawback of this element.

Code example

<canvas id="chart" width="400" height="300">
  <!-- Fallback for screen readers and search engines -->
  <p>Monthly sales chart: January 120, February 145, March 98.</p>
</canvas>

Further reading