Canvas in HTML

A canvas is a blank pixel buffer, so everything about it is invisible to assistive tech.

<figure>
  <canvas id="sparkline" width="480" height="120" role="img"
          aria-label="Words per minute over the last 30 days,
                      rising from 48 to 71">
    Words per minute rose from 48 to 71 over 30 days.
  </canvas>
  <figcaption>Typing speed, last 30 days</figcaption>
</figure>

How it works

1. width and height are the pixel grid, not the CSS display size.
2. The fallback content inside is what a reader gets, so make it real.
3. Give it a role and a label, or describe the same data in text nearby.

The run, in numbers

Lines

8

Characters to type

264

Tokens

39

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 31 seconds.

Type this snippet

Step 8 of 9 in Media & embeds, step 15 of 23 in Semantics & metadata.

← Previous Next →