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:
|
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:
|
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) |