WCAG 2.2 Demo Suite

2.1.3 Level AAA Guideline 2.1 Keyboard Accessible Added in WCAG 2.0 Not detectable automatically

Keyboard (No Exception)

All functionality is keyboard operable with no exception for functions that require path-dependent input such as freehand drawing.

Who this affects

Keyboard-only users who are excluded from the small set of features 2.1.1 allows to remain mouse-only.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.1.3

Open the failing example in a new tab

fail.html — the problem

<h1>Sign for your delivery</h1>

<!-- This page PASSES 2.1.1 Keyboard at Level A. 2.1.1 carries an exception for
     functionality that "requires input that depends on the path of the user's
     movement and not just the endpoints" - and freehand signing is the
     textbook example of that exception.

     2.1.3 at AAA removes the exception entirely. Every function must be
     keyboard operable, including this one. Here the signature pad is the ONLY
     way to complete the delivery, and it cannot be driven from a keyboard,
     a switch or a voice command. -->
<p>Draw your signature in the box using a mouse or your finger.</p>
<canvas id="pad" width="420" height="150"
        role="img" aria-label="Signature pad — draw your signature here"></canvas>
<p><button type="button" class="button">Confirm delivery</button></p>

Meets 2.1.3

Open the passing example in a new tab

pass.html — the fix

<h1>Sign for your delivery</h1>

<!-- FIX 1: the drawing surface itself is keyboard operable. It is focusable,
     arrow keys move the pen, Space lifts and lowers it, and the instructions
     are announced. This is more work than most teams expect, which is why
     2.1.1 grants the exception and 2.1.3 does not. -->
<p id="pad-help">Use the arrow keys to move the pen and press Space to lift or lower it.
   Or draw with a mouse or your finger.</p>
<canvas id="pad" width="420" height="150" tabindex="0"
        role="application" aria-label="Signature pad" aria-describedby="pad-help"></canvas>
<p id="pen" role="status">Pen is up.</p>

<!-- FIX 2: and, more practically, an equivalent that needs no drawing at all.
     A typed signature with an explicit confirmation is legally sufficient in
     most jurisdictions and is operable by every input device there is.

     When you meet 2.1.3, ask first whether the path-based interaction is
     necessary at all. Usually there is a simpler equivalent, and offering it
     is better for everyone than heroically making a canvas keyboard-driveable. -->
<div class="alt">
  <h2>Or sign by typing your name</h2>
  <div class="field">
    <label for="typed">Type your full name</label>
    <input type="text" id="typed" autocomplete="name">
  </div>
  <p class="field">
    <input type="checkbox" id="agree">
    <label for="agree">I confirm this is my electronic signature</label>
  </p>
</div>

<p><button type="button" class="button">Confirm delivery</button></p>

How to test it

Identify any path-dependent feature — signature capture, freehand drawing, drag-based map panning — and confirm a keyboard-operable equivalent exists.

  • Automated

    Requires identifying path-dependent functionality and testing alternatives by hand.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification