Device-Independent User Input

Accessibility Techniques for Device-Independent User Input
Topic Technique WCAG AA Requirement
Keyboard Focusable with Tab Key: Links, buttons, and interactive controls MUST be keyboard-focusable. Required
WCAG 2.1.1
Logical Tab Order: The navigation order of focusable elements MUST be logical and intuitive. Required
WCAG 2.4.3
No Positive tabindex Values: tabindex of positive values SHOULD NOT be used. best practice
Visual Focus Indicator: All focusable elements MUST have a visual focus indicator when in focus. Required
WCAG 2.4.7
Enhanced Visual Focus Indicator: Focusable elements SHOULD have enhanced visual focus indicator styles. best practice
Color Contrast of Visual Focus Indicator: The contrast of all large visual focus indicators (at least 3px by 3px) against the background) SHOULD be at least 3 to 1. Required
WCAG 1.4.11 (WCAG 2.1)
Keyboard Functionality: Functionality MUST be available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard. Required
WCAG 2.1.1
Keyboard Traps: Keyboard focus MUST NOT be locked or trapped in a particular page element and the user MUST be able to navigate to and from all navigable page elements using only a keyboard. Required
WCAG 2.1.2
Keyboard Shortcuts: Page-specified shortcut keys and accesskeys MUST NOT conflict with existing keyboard shortcuts in the browser, operating system, or assistive technologies. Required
WCAG 2.1.4 (WCAG 2.1)
Custom Keystroke Instructions: When custom keyboard behavior is required to use a component, keyboard instructions MUST be provided. Required
WCAG 3.3.2
ARIA Widget Instructions: ARIA widgets that require more than just the Tab key to interact with may be confusing to users (even when the widgets follow the WAI-ARIA Authoring Practices), so you MAY provide keyboard instructions. best practice
Keyboard Focus Management During Interactions Set Keyboard Focus: The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction. Required
WCAG 2.4.3
No Lost Focus: The focus MUST NOT become lost or reset to the top of the page, except when loading or re-loading a page. Required
WCAG 2.4.3
Focus Target Has Text: When moving or setting focus, the destination element MUST contain discernible text (either standard text or programmatically-associated text). Required
WCAG 1.3.1
Mouse

Click Target Size: The click target size SHOULD be at least 44 by 44 CSS pixels.

Note: Allowed exceptions include the following circumstances:

  • The target is available through an equivalent control of at least 44 by 44 CSS pixels
  • The target is inline (in a sentence or block of text)
  • The target size is user-customizable
  • The smaller target size is essential to the information or functionality
best practice
Visual Hover Indicator: An enhanced visual hover indicator SHOULD be provided. best practice
Pointer Cancellation: For functionality that can be operated using a single-pointer, at least one of the following MUST be true: no down-event, can abort/undo, up reversal, or essential. Required
WCAG 2.5.2 (WCAG 2.1)
Voice Visual Labels Match Programmatic Labels: The visual labels for links, buttons, form elements, and other controls SHOULD match the programmatic labels (to allow easy and intuitive voice commands). Required
WCAG 2.5.3 (WCAG 2.1)
All the keyboard requirements above apply. Required
multiple
Touch Touch Functionality: Functionality MUST be available using standard touch methods, unless the functionality cannot be accomplished in any known way using a touch device. Required
WCAG 2.5.1 (WCAG 2.1)

Touch Functionality with Screen Reader Enabled: Functionality MUST be available using screen reader touch methods (e.g. single tap or double tap actions), unless the functionality cannot be accomplished in any known way using a touch device.

Note: The touch actions with the screen reader turned on are completely different from the touch actions when the screen reader is turned off.

Required
WCAG 2.5.1 (WCAG 2.1)
Single pointer: Functionality MUST work with a single pointer (e.g. a single finger), unless multipoint activation is essential. Required
WCAG 2.5.1 (WCAG 2.1)
Touch cancellation: Touch events MUST NOT be activated on a down event (use up events instead), to allow users to cancel, abort, or undo touch events, unless the down event is essential. Required
WCAG 2.5.2 (WCAG 2.1)
Gesture-Only Functionality: Features MUST NOT depend on swipe or gesture motions as the only activation method. Required
WCAG 2.5.1
(WCAG 2.1)
Motion Actuation: Features MUST NOT depend on kinetic motion of the device (e.g. shake, raise, lower, tilt). Required
WCAG 2.5.4
(WCAG 2.1)
Focus Trap: Touch/gesture focus MUST NOT be locked or trapped in a particular page element and the user MUST be able to navigate to and from all navigable page elements using standard touch actions. Required
WCAG 2.1.2

Touch Target Size: The click/touch target size SHOULD be at least 44x44 CSS pixels, unless at least one of the following is true:

  • There is an equivalent control on the same page that is at least 44x44 CSS pixels, OR
  • The target is inline (in a sentence or block of text), OR
  • The user agent controls the target size, OR
  • The smaller size of the target is essential to the information being conveyed.
best practice
Pointer Gestures: All functionality that uses multipoint or path-based gestures for operation MUST be operable with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. Required
WCAG 2.5.1
Motion Actuation Motion Actuation: Functionality that can be operated by device or user motion MUST also be operable by user interface components and MUST allow the ability to disable motion actuation. Required
WCAG 2.5.4 (WCAG 2.1)