Ensure All Functionality is Keyboard Operable Without Exception

Disabilities Affected: Mobility, Visual

Success Criterion: 2.1.3

Level: AAA

All functionality of the content must be operable through a keyboard interface without requiring specific timings for individual keystrokes.

Why It Matters

This AAA criterion removes the exceptions allowed at Level A (WCAG 2.1.1), which permitted keyboard inaccessibility if the underlying function couldn’t be accomplished via keyboard (e.g., freehand drawing). At Level AAA, all functionality must be keyboard operable. This ensures that keyboard-only users are never locked out of any feature.

Fixing the Issue

Ensure every single interactive element and function can be accessed and operated using the keyboard alone. This might require providing keyboard alternatives for actions typically performed with a mouse, such as:

Freehand Drawing: Provide input fields for coordinates or alternative ways to create shapes (e.g., selecting shape tools, specifying dimensions).
Complex Drag-and-Drop: Provide keyboard controls (e.g., arrow keys + Enter/Space, or menu options) to select, move, and drop items.
Precise Pointer Positioning: If an action relies on fine pointer movement, provide keyboard alternatives like arrow key adjustments or direct input fields. Avoid interactions that require holding a key down for a specific duration or pressing keys very rapidly.

Good Code Example

(Conceptual) Providing keyboard controls for a drawing canvas:

Markup

<canvas id="drawing-canvas" width="400" height="300" style="border:1px solid black;"></canvas>
<div>
  <button onclick="moveCursor('up')">Up</button>
  <button onclick="moveCursor('down')">Down</button>
  <button onclick="moveCursor('left')">Left</button>
  <button onclick="moveCursor('right')">Right</button>
  <button onclick="drawPixel()">Draw Pixel</button>
  <label for="x-coord">X:</label><input type="number" id="x-coord">
  <label for="y-coord">Y:</label><input type="number" id="y-coord">
  <button onclick="moveToCoords()">Move to Coords</button>
</div>
<script>
  // JS would handle moving a virtual cursor on the canvas
  // and drawing based on button clicks or keyboard events mapped to these buttons.
  // All drawing functions are accessible via keyboard-operable buttons/inputs.
  function moveCursor(direction) { console.log("Move", direction); }
  function drawPixel() { console.log("Draw"); }
  function moveToCoords() { console.log("Move to", document.getElementById('x-coord').value, document.getElementById('y-coord').value); }
</script>

Bad Code Example

A freehand drawing tool with only mouse input:

Markup

<canvas id="freehand-canvas" width="400" height="300"></canvas>
<script>
  // Assume JS here only listens for mouse events (mousedown, mousemove, mouseup)
  // to allow freehand drawing.
  // No keyboard alternative is provided to draw lines or shapes.
  // This fails WCAG 2.1.3 (AAA). It might pass WCAG 2.1.1 (A) if drawing
  // is considered something where the path is essential.
</script>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult