Success Criterion 2.1.1
Conformance level A

Signature Pad Required With No Non-Drawing Alternative

2.1.1 — Keyboard

Scenario

Setting

A news outlet's article page

What’s wrong

Signature pads / drawing inputs gating required flows without an alternative (exception misapplied when the *function* isn't path-dependent, e.g., "type your name").

Example

<div class="petition-widget">
  <p>Add your name to our open letter demanding cleaner air standards.</p>
  <canvas id="sig-pad" width="300" height="100"></canvas>
  <button disabled id="submit-signature">Add my name</button>
</div>
<!-- mousedown/mousemove draws a signature on the canvas; submit stays disabled until the canvas has non-empty pixel data -->

Why it matters

A reader using only a keyboard can read the open letter attached to the article but can never draw a signature on the canvas, so the disabled button never enables and their name is never added to the petition.

How to test

Tab through a required signature step: if drawing with a mouse/finger is the only way to complete it, with no typed-name or checkbox alternative, it fails.

How to fix

Since agreeing to a petition does not depend on the shape of a drawn line, a typed-name field satisfies the same function without a pointer, so pair it with the optional canvas rather than requiring the drawing.

<div class="petition-widget">
  <p>Add your name to our open letter demanding cleaner air standards.</p>
  <canvas id="sig-pad" width="300" height="100"></canvas>
  <label for="typed-name">Or type your name to sign</label>
  <input type="text" id="typed-name">
  <button id="submit-signature">Add my name</button>
</div>
<!-- enable submit once either the canvas has drawn pixels or the typed-name field is non-empty -->

Outcome

A reader types their name into the petition instead of drawing it, and their signature is added to the open letter immediately.

Who is affected

Keyboard-only users and users with motor impairments who cannot perform a freehand drag gesture are locked out of signing the petition entirely.

Learn more

Understanding Understanding document (opens in a new tab)