WCAG (Level A) SC 2.1.1 Keyboard (W3.org)
Issue description
WCAG 2.1.1, “Keyboard” Guideline means users should be able to navigate, interact with, and access all content and features without needing a mouse or other pointing device. It is a fundamental accessibility guideline that ensures all website functionality is accessible and operable using only a keyboard interface.
Many websites rely heavily on mouse interactions, making it difficult or impossible for some users to:
- Navigate the website: Users might not be able to access menus, links, or other interactive elements using only the keyboard.
- Interact with content: Users might not be able to perform actions like clicking buttons, selecting options from dropdowns, or submitting forms using the keyboard.
- Access all features: Certain features or content might be exclusively available through mouse interactions, excluding keyboard-only users.
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.2 No Keyboard Trap
- WCAG (Level AAA) SC 2.1.3 Keyboard (No Exception)
- 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.1, “Keyboard” involves ensuring that all website functionality is accessible and operable using only a keyboard. Here’s a breakdown of how to achieve this:
Native HTML elements
- Use semantic elements: Utilize standard HTML elements like
<button>,<a>,<input>,<select>, etc., for their intended purposes. These elements have built-in keyboard accessibility. - Form elements: Ensure all form fields and controls are keyboard accessible and have associated labels (
<label>) for easy navigation and understanding. Headings and landmarks: Use heading tags (<h1>–<h6>) and ARIA landmarks (e.g.,role="navigation",role="main") to provide a clear structural hierarchy for keyboard navigation.
Keyboard event handlers
- Add keyboard events: For interactive elements that rely on JavaScript, include keyboard event handlers (e.g.,
onkeydown,onkeyup,onkeypress) in addition to mouse events. This ensures they respond to keyboard input. - Logical focus order: Ensure the tab order through interactive elements follows a logical and intuitive sequence, typically from top to bottom and left to right. Use the
tabindexattribute if necessary to adjust the tab order. For more information on Logical focus order, read our documentation on WCAG (Level A) SC 2.4.3 Focus Order.
Visual focus indicators
- Clear focus states: Provide a clear visual indicator (e.g., a change in color, outline, or border) when an element receives keyboard focus. This helps users know where they are on the page. For more information on visual focus indicators, see our post WCAG (Level AA) SC 2.4.7 Focus Visible.
- Sufficient contrast: Ensure the focus indicator has sufficient color contrast against the background and surrounding elements. If you are looking for more in-depth information on color contrast, check out our resources for WCAG (Level AA) SC 1.4.3 Contrast (Minimum) and WCAG (Level A) SC 1.4.1 Use of Color.
ARIA attributes (when necessary)
- tabindex: Use
tabindex="0"to add elements to the tab order that aren’t included by default (e.g., custom components). Usetabindex="-1"to remove elements from the tab order when needed. - ARIA roles: Use ARIA roles to define the purpose of custom components or elements that don’t have a native semantic equivalent (e.g.,
role="button"for a custom button). - ARIA states and properties: Use ARIA attributes to convey the current state of interactive elements (e.g.,
aria-expanded,aria-checked,aria-disabled).
Testing
- Thorough testing: Test all interactive functionality using only the keyboard to ensure all actions can be performed without a mouse.
- Different browsers: Test in different browsers and assistive technologies to ensure compatibility.
Example
If you have a custom dropdown menu built with JavaScript, you need to: Include keyboard event handlers to allow users to open the menu with Enter or Space, navigate through options with arrow keys, and select an option with Enter. Provide a clear visual focus state for the currently selected option. Use ARIA attributes like role="listbox", aria-expanded, and aria-activedescendant to convey the state and functionality of the menu to assistive technologies.
