Operable Guidelines — WCAG 2.1 Through 2.5

In this tutorial, you will learn about Operable Guidelines. We cover key concepts, practical examples, and best practices to help you master this topic.

WCAG Operable guidelines ensure users can operate interfaces through keyboard access (2.1), sufficient time (2.2), seizure-safe content (2.3), clear navigation (2.4), and multiple input modalities (2.5) including pointer gestures and motion activation.

What You'll Learn

You will learn the five operable guidelines, their key success criteria, and how to implement keyboard navigation, timing controls, and input modality support.

Why It Matters

If users cannot operate your interface, nothing else matters. Operable violations often block users completely rather than just making things harder.

Real-World Use

DodaTech tests every feature with keyboard-only navigation before release. Durga Antivirus Pro's scan scheduling includes adjustable time limits and pausing options.

flowchart TD
  A[Operable Guidelines] --> B[2.1 Keyboard]
  A --> C[2.2 Enough Time]
  A --> D[2.3 Seizures]
  A --> E[2.4 Navigable]
  A --> F[2.5 Input Modalities]
  B --> G[All functions keyboard accessible]
  C --> H[Adjustable time limits, pause, extend]
  D --> I[No flashing more than 3 times per second]
  E --> J[Clear navigation, focus order, headings]
  F --> K[Pointer, touch, voice, motion alternatives]

Guideline 2.1 — Keyboard Accessible

All functionality must be available from a keyboard. Users must be able to Tab through interactive elements and activate them.

Key Criteria

2.1.1 Keyboard (A). 2.1.2 No Keyboard Trap (A). 2.1.4 Character Key Shortcuts (A).

<!-- Keyboard-accessible custom control -->
<div role="tablist" aria-label="Security settings">
  <button role="tab" aria-selected="true" aria-controls="panel-general"
          tabindex="0" onclick="switchTab('general')">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-advanced"
          tabindex="-1" onclick="switchTab('advanced')">
    Advanced
  </button>
</div>

// Keyboard event handling for custom widget
document.querySelectorAll('[role="tab"]').forEach(tab => {
  tab.addEventListener('keydown', (e) => {
    const tabs = [...tab.parentElement.querySelectorAll('[role="tab"]')];
    const currentIndex = tabs.indexOf(tab);

    if (e.key === 'ArrowRight') {
      e.preventDefault();
      tabs[(currentIndex + 1) % tabs.length].focus();
    }
    if (e.key === 'ArrowLeft') {
      e.preventDefault();
      tabs[(currentIndex - 1 + tabs.length) % tabs.length].focus();
    }
  });
});

Guideline 2.2 — Enough Time

Users must have enough time to read and use content. Provide ways to adjust, extend, or remove time limits.

Key Criteria

2.2.1 Timing Adjustable (A). 2.2.2 Pause, Stop, Hide (A).

<!-- Session timeout warning -->
<div role="alert" aria-live="assertive">
  <p>Your session will expire in 2 minutes.</p>
  <button onclick="extendSession()">Extend session</button>
</div>

Guideline 2.3 — Seizures

Content must not cause seizures. No content may flash more than three times per second.

Key Criteria

2.3.1 Three Flashes or Below Threshold (A). 2.3.2 Three Flashes (AAA).

Guideline 2.4 — Navigable

Provide ways to help users navigate, find content, and determine where they are.

Key Criteria

2.4.1 Bypass Blocks (A): skip link. 2.4.2 Page Titled (A). 2.4.3 Focus Order (A). 2.4.4 Link Purpose (A). 2.4.5 Multiple Ways (AA). 2.4.6 Headings and Labels (AA). 2.4.7 Focus Visible (AA). 2.4.11 Focus Appearance (AA). 2.4.12 Focus Not Obscured (AA).

<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Page title -->
<title>Scan Results — Durga Antivirus Pro</title>

<!-- Descriptive link -->
<a href="/threat-report-2026.pdf">
  Download 2026 threat report (PDF, 4.2MB)
</a>

Guideline 2.5 — Input Modalities

Support multiple input methods beyond keyboard including touch, voice, and motion.

Key Criteria

2.5.1 Pointer Gestures (A). 2.5.2 Pointer Cancellation (A). 2.5.3 Label in Name (A). 2.5.4 Motion Actuation (A). 2.5.7 Dragging Movements (AA). 2.5.8 Pointer Target Spacing (AA).

<!-- Voice-accessible button -->
<button onclick="startScan()">Start full scan</button>
<!-- User says: click Start full scan -->

<!-- Alternative to dragging -->
<button onclick="moveLeft()">Move left</button>
<button onclick="moveRight()">Move right</button>

Common Mistakes

1. Keyboard Traps

Modals that trap keyboard focus must provide a way to escape (Escape key, close button).

2. Missing Skip Links

Without a skip link, keyboard users must Tab through every navigation link before reaching content.

3. Invisible Focus Indicators

Removing outline: none without providing an alternative focus style makes navigation impossible for keyboard users.

4. Unadjustable Time Limits

Sessions that time out without warning lose user work. Always warn and allow extension.

5. Flashing Content

Animated content can flash more than three times per second. Use prefers-reduced-motion to respect user preferences.

6. Ambiguous Link Text

Click Here or Read More do not describe the link destination. Use descriptive text.

7. Path-Dependent Gestures

Features that require dragging (like reordering a list) must provide a single-click alternative.

Practice Questions

1. What does Guideline 2.1 require?

All functionality must be available from a keyboard. No keyboard traps allowed.

2. What is the minimum focus indicator requirement in WCAG 2.2?

2.4.11 Focus Appearance: at least 2px thick perimeter with 3:1 contrast against unfocused state.

3. What is an accessible alternative to dragging movements?

Single-click alternatives where users select an item and then select a destination.

4. What is the minimum pointer target size in WCAG 2.2?

2.5.8 Pointer Target Spacing: at least 24 by 24 CSS pixels with adequate spacing.

5. Challenge: Navigate your website using only the keyboard. Document every operable barrier you encounter.

FAQ

Mini Project

Create a keyboard navigation test script for a web application. Include test cases for Tab order, interactive elements, dropdown menus, modals, and form submission.

What's Next

Learn about Understandable Guidelines 3.1 through 3.3 covering readability, predictability, and input assistance.