Device-Independent User Input
Topic
Technique
WCAG AA Requirement
Keyboard
Focusable with Tab Key: Links, buttons, and interactive controls MUST be keyboard-focusable.
Logical Tab Order: The navigation order of focusable elements MUST be logical and intuitive.
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.
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.
Keyboard Functionality: Functionality MUST be available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard.
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.
Keyboard Shortcuts: Page-specified shortcut keys and accesskeys MUST NOT conflict with existing keyboard shortcuts in the browser, operating system, or assistive technologies.
Custom Keystroke Instructions: When custom keyboard behavior is required to use a component, keyboard instructions MUST be provided.
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.
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.
Focus Target Has Text: When moving or setting focus, the destination element MUST contain discernible text (either standard text or programmatically-associated text).
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
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).
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.
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.
Single pointer: Functionality MUST work with a single pointer (e.g. a single finger), unless multipoint activation is essential.
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.
Gesture-Only Functionality: Features MUST NOT depend on swipe or gesture motions as the only activation method.
Motion Actuation: Features MUST NOT depend on kinetic motion of the device (e.g. shake, raise, lower, tilt).
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.
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
Last updated
Was this helpful?