Operable -- WCAG Principle 2

User interface components and navigation must be operable.

What Does "Operable" Mean?

Operable is the second of the four top-level principles in WCAG 2.2 [1], which organise its success criteria under the POUR acronym -- Perceivable, Operable, Understandable, Robust. The principle states that user interface components and navigation must be operable. Where Perceivable governs whether users can receive the content through their available sensory channels, Operable governs whether they can act on it: whether the controls that carry the page's behaviour can actually be reached, focused, activated, and completed by a user who is not driving the browser with a pixel-accurate pointing device and an unlimited attention budget.

The failure mode is concrete: a custom dropdown built on <div> elements that never receive focus strands every keyboard and switch user on the control; a carousel that auto-advances every three seconds out-paces a user who reads more slowly or uses a screen magnifier to track the viewport; a login screen that flashes a promo animation at 4 Hz across a high-contrast red-to-white transition crosses the photosensitive-seizure threshold in 2.3.1 [2]; a single-page app that swaps the main region without updating the document title or moving focus leaves assistive technology pointed at the wrong place. Each is an operability failure because the content is perceivable but the machinery to use it is gated behind a single input channel, a single timing assumption, or a single motor capability that some users do not have.

The principle decomposes into five guidelines. 2.1 Keyboard Accessible requires that all functionality be reachable and driveable from the keyboard interface, with no traps. 2.2 Enough Time constrains time limits, moving content, interruptions, and session timeouts so users who need more time can get it. 2.3 Seizures and Physical Reactions sets flash and animation thresholds that keep content from triggering photosensitive seizures or vestibular reactions. 2.4 Navigable covers the wayfinding surface -- page titles, focus order, link purpose, headings, skip links, focus visibility, and focus-not-obscured -- that lets users locate themselves and move through a site. 2.5 Input Modalities extends operability beyond the keyboard to touch, pointer, voice, and motion inputs, with rules on gesture complexity, pointer cancellation, target size, and accessible-name / visible-label alignment. Each guideline expands into individual success criteria rated A (must), AA (should for most legal targets), or AAA (aspirational).

Guidelines Under Operable

2.1 Keyboard Accessible

Guideline 2.1 is the load-bearing guideline for every assistive technology that emulates a keyboard -- screen readers, switch interfaces, voice control, on-screen keyboards, and sip-and-puff devices all drive the page through the same keyboard interface the OS exposes. 2.1.1 Keyboard (Level A) [3] requires that all functionality be operable through a keyboard interface without requiring specific timings for individual keystrokes. 2.1.2 No Keyboard Trap (Level A) [4] requires that focus can always move away from any component using standard keys; the failure mode is a widget that calls event.preventDefault() on Tab without forwarding focus, stranding the user inside a modal or embedded player. 2.1.4 Character Key Shortcuts (Level A) [5] prevents single-letter shortcuts from hijacking speech input. 2.1.3 Keyboard (No Exception) (Level AAA) [6] removes the narrow path-dependent input exception in 2.1.1. Native HTML controls inherit the correct behaviour; custom widgets built on <div> and <span> must implement focus, activation, and the relevant keyboard interaction pattern from the WAI-ARIA Authoring Practices Guide [7].

2.2 Enough Time

Guideline 2.2 governs every time-bounded mechanic on the page: session expiry, inactivity logout, auto-advancing carousels, marquee text, live-updating tickers, and re-authentication flows. 2.2.1 Timing Adjustable (Level A) [8] requires that time limits be turn-off-able, adjustable to ten times the default, or extendable with at least twenty seconds' warning, with narrow exceptions for real-time events and limits over twenty hours. 2.2.2 Pause, Stop, Hide (Level A) [9] requires that any auto-starting motion, blink, scroll, or auto-updating content lasting more than five seconds can be paused, stopped, or hidden by the user; the failure mode is a hero carousel that keeps resetting a screen-magnifier user's viewport mid-read. 2.2.3 No Timing, 2.2.4 Interruptions, 2.2.5 Re-authenticating, and 2.2.6 Timeouts at Level AAA [10][11][12][13] tighten the floor further -- no timing at all except for real-time events, user-postponable interruptions, data preserved across re-auth, and an explicit warning of any inactivity timeout that would lose data. The mechanism these criteria protect against is the assumption that every user reads, types, and decides at the designer's speed.

2.3 Seizures and Physical Reactions

Guideline 2.3 sets measurable thresholds on flashing and motion. 2.3.1 Three Flashes or Below Threshold (Level A) [2] forbids content that flashes more than three times per second unless the flashing area stays below the general and red flash thresholds defined in the specification; this is the criterion that protects users with photosensitive epilepsy [14]. 2.3.2 Three Flashes (Level AAA) [15] removes the area-and-intensity exception and caps the page at three flashes per second outright. 2.3.3 Animation from Interactions (Level AAA) [16] requires that non-essential motion triggered by user interaction -- parallax scrolls, view transitions, physics-based scroll effects -- can be disabled, typically by honouring the prefers-reduced-motion media query. Vestibular users experience sustained motion as nausea or dizziness; photosensitive users experience it as a seizure risk; the two failure modes share the same remediation surface.

2.4 Navigable

Guideline 2.4 is the largest guideline under Operable and covers the wayfinding surface users rely on to locate themselves and move through a site. 2.4.1 Bypass Blocks (Level A) [17] requires a mechanism -- typically a skip link or a landmark region -- to jump past repeated header and navigation content. 2.4.2 Page Titled (Level A) [18] requires that each page carry a descriptive <title>, which is often the first thing a screen reader announces on navigation and the only orientation cue in a browser tab. 2.4.3 Focus Order (Level A) [19] requires that the tab sequence preserve meaning and operability. 2.4.4 Link Purpose (In Context) (Level A) [20] requires that the destination of each link be determinable from the link text plus its programmatic context; a page of "click here" links fails because the accessible name alone carries no information. At Level AA, 2.4.5 Multiple Ways [21], 2.4.6 Headings and Labels [22], 2.4.7 Focus Visible [23], and 2.4.11 Focus Not Obscured (Minimum) [24] require multiple navigation paths to each page, descriptive headings and labels, a visible focus indicator, and that the focused element not be entirely hidden behind sticky headers, cookie banners, or overlays. Level AAA adds 2.4.8 Location [25], 2.4.9 Link Purpose (Link Only) [26], 2.4.10 Section Headings [27], 2.4.12 Focus Not Obscured (Enhanced) [28], and 2.4.13 Focus Appearance [29], the last of which pins the focus indicator to a minimum perimeter and a 3:1 contrast ratio against the unfocused state. A *:focus { outline: none } reset without a replacement indicator fails 2.4.7 directly and defeats every keyboard user regardless of disability.

2.5 Input Modalities

Guideline 2.5 extends operability beyond the keyboard to touch, pointer, voice, and device-motion inputs. 2.5.1 Pointer Gestures (Level A) [30] requires that any multipoint or path-based gesture (pinch-zoom, swipe, two-finger rotate) have a single-pointer alternative, so users of a head-pointer or a single switch are not locked out of the control. 2.5.2 Pointer Cancellation (Level A) [31] requires that activation happen on the up-event, not the down-event, so a misplaced touch can be aborted by sliding off the target. 2.5.3 Label in Name (Level A) [32] requires that a control's accessible name contain the text of its visible label; when an aria-label silently replaces the visible label with different words, a voice-control user saying "click submit" cannot match the accessible name and the command fails. 2.5.4 Motion Actuation (Level A) [33] requires a UI alternative to device-motion triggers (shake-to-undo, tilt-to-scroll). At Level AA, 2.5.7 Dragging Movements [34] requires a non-drag alternative for any dragging operation, and 2.5.8 Target Size (Minimum) [35] sets a 24 CSS pixel minimum touch-target size with exceptions for inline, essential, and user-agent-controlled targets. 2.5.5 Target Size (Enhanced) [36] raises the floor to 44 CSS pixels at Level AAA, and 2.5.6 Concurrent Input Mechanisms [37] forbids restricting input to a single modality. The through-line: no criterion in 2.5 assumes a specific motor profile.

References

  1. [1] W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C, Accessed 2026-04-07. https://www.w3.org/TR/WCAG22/ ↩
  2. [2] W3C (2023). Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html ↩ ↩
  3. [3] W3C (2023). Understanding Success Criterion 2.1.1: Keyboard. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html ↩
  4. [4] W3C (2023). Understanding Success Criterion 2.1.2: No Keyboard Trap. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html ↩
  5. [5] W3C (2023). Understanding Success Criterion 2.1.4: Character Key Shortcuts. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html ↩
  6. [6] W3C (2023). Understanding Success Criterion 2.1.3: Keyboard (No Exception). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception.html ↩
  7. [7] W3C (2024). WAI-ARIA Authoring Practices Guide. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/ARIA/apg/ ↩
  8. [8] W3C (2023). Understanding Success Criterion 2.2.1: Timing Adjustable. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html ↩
  9. [9] W3C (2023). Understanding Success Criterion 2.2.2: Pause, Stop, Hide. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html ↩
  10. [10] W3C (2023). Understanding Success Criterion 2.2.3: No Timing. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html ↩
  11. [11] W3C (2023). Understanding Success Criterion 2.2.4: Interruptions. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html ↩
  12. [12] W3C (2023). Understanding Success Criterion 2.2.5: Re-authenticating. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/re-authenticating.html ↩
  13. [13] W3C (2023). Understanding Success Criterion 2.2.6: Timeouts. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/timeouts.html ↩
  14. [14] Epilepsy Action (2024). Photosensitive epilepsy. Epilepsy Action (British Epilepsy Association), Accessed 2026-04-07. https://www.epilepsy.org.uk/info/photosensitive-epilepsy ↩
  15. [15] W3C (2023). Understanding Success Criterion 2.3.2: Three Flashes. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/three-flashes.html ↩
  16. [16] W3C (2023). Understanding Success Criterion 2.3.3: Animation from Interactions. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html ↩
  17. [17] W3C (2023). Understanding Success Criterion 2.4.1: Bypass Blocks. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html ↩
  18. [18] W3C (2023). Understanding Success Criterion 2.4.2: Page Titled. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html ↩
  19. [19] W3C (2023). Understanding Success Criterion 2.4.3: Focus Order. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html ↩
  20. [20] W3C (2023). Understanding Success Criterion 2.4.4: Link Purpose (In Context). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html ↩
  21. [21] W3C (2023). Understanding Success Criterion 2.4.5: Multiple Ways. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html ↩
  22. [22] W3C (2023). Understanding Success Criterion 2.4.6: Headings and Labels. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html ↩
  23. [23] W3C (2023). Understanding Success Criterion 2.4.7: Focus Visible. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html ↩
  24. [24] W3C (2023). Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html ↩
  25. [25] W3C (2023). Understanding Success Criterion 2.4.8: Location. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/location.html ↩
  26. [26] W3C (2023). Understanding Success Criterion 2.4.9: Link Purpose (Link Only). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html ↩
  27. [27] W3C (2023). Understanding Success Criterion 2.4.10: Section Headings. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/section-headings.html ↩
  28. [28] W3C (2023). Understanding Success Criterion 2.4.12: Focus Not Obscured (Enhanced). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-enhanced.html ↩
  29. [29] W3C (2023). Understanding Success Criterion 2.4.13: Focus Appearance. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html ↩
  30. [30] W3C (2023). Understanding Success Criterion 2.5.1: Pointer Gestures. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html ↩
  31. [31] W3C (2023). Understanding Success Criterion 2.5.2: Pointer Cancellation. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html ↩
  32. [32] W3C (2023). Understanding Success Criterion 2.5.3: Label in Name. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html ↩
  33. [33] W3C (2023). Understanding Success Criterion 2.5.4: Motion Actuation. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/motion-actuation.html ↩
  34. [34] W3C (2023). Understanding Success Criterion 2.5.7: Dragging Movements. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html ↩
  35. [35] W3C (2023). Understanding Success Criterion 2.5.8: Target Size (Minimum). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html ↩
  36. [36] W3C (2023). Understanding Success Criterion 2.5.5: Target Size (Enhanced). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html ↩
  37. [37] W3C (2023). Understanding Success Criterion 2.5.6: Concurrent Input Mechanisms. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/concurrent-input-mechanisms.html ↩