WCAG 2.2 Demo Suite

2.1.1 Level A Guideline 2.1 Keyboard Accessible Added in WCAG 2.0 Partly detectable automatically

Keyboard

All functionality is operable through a keyboard interface, without requiring specific timings for individual keystrokes.

Who this affects

Blind users, who cannot aim a mouse they cannot see. Users with motor disabilities using switch devices, sip-and-puff, or voice control — all of which drive the keyboard interface underneath.

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.1

Open the failing example in a new tab

fail.html — the problem

<h1>Reserve a copy</h1>

<!-- FAILURE 1: a div with a click handler. It is not focusable, has no role,
     and responds to no key. A mouse user sees a button; a keyboard user cannot
     reach it at all. Adding CSS :hover does not make it operable. -->
<div class="fake-button" onclick="reserve()">Reserve now</div>

<!-- FAILURE 2: a custom checkbox built from a div. Same problem: no tab stop,
     no Space key handling, no state exposed to assistive technology. -->
<p>
  <span class="fake-check" data-checked="false" onclick="toggle(this)"></span>
  Email me when it arrives
</p>

<!-- FAILURE 3: a link with no href. Without href an anchor is not focusable,
     so this drops out of the tab order entirely. -->
<p><a onclick="showTerms()">Reservation terms</a></p>

<p id="out" role="status"></p>

Meets 2.1.1

Open the passing example in a new tab

pass.html — the fix

<h1>Reserve a copy</h1>

<!-- FIX 1: a real button. Focusable, in the tab order, activates on both Enter
     and Space, announces as "Reserve now, button" - all for free, with no
     JavaScript and no ARIA. This is almost always the right answer. -->
<button type="button" class="button" onclick="reserve()">Reserve now</button>

<!-- FIX 2: a real checkbox. Space toggles it, its checked state is exposed to
     assistive technology automatically, and it works with voice control. -->
<p class="field">
  <input type="checkbox" id="notify">
  <label for="notify">Email me when it arrives</label>
</p>

<!-- FIX 3: a real link with a real href. Focusable, activates on Enter, and
     offers the browser's own affordances such as open-in-new-tab. -->
<p><a href="#terms">Reservation terms</a></p>

<p id="out" role="status"></p>

<h2 id="terms">Reservation terms</h2>
<p>Reservations are held for seven days.</p>

How to test it

Put the mouse away. Tab through the entire page and operate every control with Enter, Space, and arrow keys. Anything reachable by mouse but not by keyboard fails. Click handlers on div and span elements are the usual cause.

  • Automated

    Scanners flag click handlers on non-interactive elements and positive tabindex, but cannot confirm that every feature is genuinely operable by keyboard.

    This demo's failure is not machine-detectable. The failure this demo shows - a div with a click handler - is the most common keyboard failure on the web, and no automated scanner detects it. The rules listed under axeRules catch other, narrower failures of 2.1.1.

    Relevant axe rules:

    • scrollable-region-focusable
    • nested-interactive

  • 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