• 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 

<canvas> charts/drawings with no fallback content or text alternative.

Example 

<canvas id="availability-chart" width="400" height="200"></canvas>
<!-- rendered by drawAvailabilityChart(), invisible to assistive tech -->

Why it matters

A patient trying to book an appointment can't tell which days have openings, since the calendar exists only as pixels on a canvas with nothing announced.

How to test

Inspect the canvas element's children in DevTools: canvas has no built-in accessibility, so it needs fallback content or an adjacent accessible summary — if absent, it fails.

How to fix

Add a role, label, or real fallback content describing what the canvas draws. Canvas content is invisible to assistive tech by default.

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

Outcome

A patient hears which days are open and books an appointment without calling the front desk to ask.

Who is affected

Blind and low-vision patients scheduling appointments independently get no information from a canvas with no fallback.

Learn more

Related scenarios