WCAG (Level AAA) SC 2.1.3 Keyboard (No Exception) (w3.org)
Issue description
WCAG 2.1.3, “Keyboard (No Exception)” is a stricter version of the Level A criterion 2.1.1. While 2.1.1 allows for some exceptions where functionality cannot be provided through a keyboard interface, this Level AAA criterion removes those exceptions. It states that all functionality of the content must be operable through a keyboard interface without requiring specific timings for individual keystrokes.
Some websites have functionality that is difficult or impossible to operate using only a keyboard. This can include:
- Drag-and-drop interactions: Dragging and dropping elements with a mouse might not have an equivalent keyboard interaction.
- Complex gestures: Touchscreen gestures or complex mouse interactions might not be replicable with a keyboard.
- Time-based interactions: Functionality that requires specific timing for keystrokes (e.g., games or interactive simulations) can be challenging for keyboard-only users.
Why this matters
- Inclusivity: By making all functionality keyboard accessible, you ensure that everyone, regardless of their physical abilities or input device preferences, can fully use and experience the website.
- Accessibility: People with motor impairments who cannot use a mouse rely on keyboard accessibility to interact with web content.
- Consistency: Providing consistent keyboard support across all functionality creates a more predictable and user-friendly experience.
Essentially, this guideline promotes a higher level of accessibility by requiring that all functionality be operable through a keyboard interface without exception. It encourages developers to find creative solutions to provide keyboard alternatives for all interactions, even complex ones.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.1.1 Keyboard
- WCAG (Level A) SC 2.1.2 No Keyboard Trap
- WCAG (Level A) SC 2.1.4 Character Key Shortcuts
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.1.3, “Keyboard (No Exception)” requires ensuring that all functionality of your website is operable through a keyboard interface, without requiring specific timings for individual keystrokes. This can be challenging, but here’s a breakdown of strategies and approaches:
Provide keyboard alternatives
- Drag-and-drop: Offer alternative ways to achieve the same outcome as drag-and-drop, such as using the keyboard arrow keys to move items between lists or using keyboard shortcuts to select and reposition elements.
- Complex gestures: Provide keyboard shortcuts or alternative interactions that replicate the functionality of complex mouse gestures or touchscreen interactions.
- Time-based interactions: Offer alternative ways to complete time-based actions, such as providing pause/resume controls or allowing users to adjust the time limits.
Use ARIA attributes
- ARIA roles and properties: Use ARIA attributes to provide keyboard accessibility to custom interactive components. For example, use
role="button"for custom buttons,aria-expandedfor expandable elements, andaria-haspopupfor elements that trigger pop-ups. aria-activedescendant: Usearia-activedescendantto manage keyboard focus within complex widgets with multiple focusable elements.
Keyboard event handling
- Handle keyboard events: Ensure all interactive elements respond to keyboard events (e.g., keydown, keyup, onkeypress) in addition to mouse events.
- Logical tab order: Ensure the tab order through interactive elements follows a logical and intuitive sequence. Use the
tabindexattribute if necessary to adjust the tab order.
Visual focus indicators
- Clear focus: Provide a clear visual indicator (e.g., a change in color, outline, or border) when an element receives keyboard focus.
- Sufficient contrast: Ensure the focus indicator has sufficient color contrast against the background.
Testing
- Thorough keyboard testing: Test all functionality using only the keyboard to ensure all actions can be performed without a mouse.
- Assistive technology testing: Test with screen readers to ensure that all interactive elements are accessible and usable.
Examples
- Drag-and-drop: Instead of requiring users to drag and drop items in a list, provide keyboard controls to move items up or down using the arrow keys.
- Complex gestures: For a map interface, provide keyboard shortcuts for zooming in/out and panning instead of relying solely on mouse wheel or touch gestures.
- Time-based interactions: In a game with time-limited actions, provide an option to pause the game or adjust the time limit to allow users to complete actions at their own pace.
By implementing these techniques, you can ensure that your website is fully keyboard accessible, providing an inclusive experience for all users, regardless of their physical abilities or input device preferences.
