Success Criterion 1.1.1
Conformance level A

Chart Drawn in Canvas With No Fallback Description

1.1.1 — Non-text Content

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

The appointment scheduler draws doctor availability on a bare <canvas> with no accessible name and no fallback content. The chart exists only as pixels, so assistive technology gets nothing that says which days are open (1.1.1).

Watch on YouTube (captions available)

Example

<canvas id="availability-chart" width="400" height="200"></canvas>
<!-- drawn by drawAvailabilityChart(); pixels only, no text alternative -->

Why it matters

A patient trying to book an appointment may not learn which days have openings, because the availability chart is never exposed as text. They may call the front desk, pick the wrong day, or give up.

How to test

Find charts or drawings rendered in <canvas>. In the browser's accessibility tree (DevTools), the canvas should have a non-empty name that describes what it shows (or a short name plus a nearby long description or data table). Check for role="img" (or another image-like role) with aria-label / aria-labelledby, and/or real fallback content inside the canvas for environments where canvas is not supported. An empty canvas with only an id and size, and nothing announced, fails. Then listen: you should hear the availability summary, not silence.

How to fix

Give the canvas a short text alternative that serves the same purpose as the chart (G94 / ARIA6): put role="img" and an aria-label that states the availability, and keep matching fallback content inside the <canvas> for when canvas is not available. Canvas bitmap content is not exposed to assistive technology by default. If the chart is complex and a short label cannot carry all the data, add a nearby data table or long description as well (G95 / G73 / G74) — do not rely on a vague label like "availability chart". Keep the label accurate as the chart updates.

<canvas id="availability-chart" width="400" height="200"
  role="img"
  aria-label="Doctor availability: Monday to Wednesday mornings only; Thursday and Friday fully open">
  <p>Doctor availability: Monday to Wednesday mornings only; Thursday and Friday fully open.</p>
</canvas>

Outcome

A patient hears something like "Doctor availability: Monday to Wednesday mornings only; Thursday and Friday fully open, image" and can book without calling the front desk. Sighted users still see the chart.

Who is affected

Screen reader users, and people using text-to-speech or braille, who get no information from a canvas chart that has no text alternative — including patients booking appointments on their own.