All interactive components on web pages (e.g., links, buttons, controls) must be accessible with keyboard alone (no mouse required).
There are two requirements for keyboard accessibility:
- Keyboard users must be able to access and operate all user interface elements (no mouse required).
- The web page must provide a clear, consistent visible focus indicator so keyboard users can always tell which element has focus.
Testing keyboard accessibility
Testing a website with a keyboard requires no special tools or skills–just try navigating your website or application using the keyboard only; don’t touch the mouse.
Use your keyboard to navigate between all links, buttons, form fields, and other features. Current focus should be reasonably easy to see. The order of movement within the page should echo the visual layout. As you do this, consider these questions:
- Can you access all features?
- Can you operate all controls?
- Is it reasonably easy to tell where you are on the page?
Common keystrokes used in web browsers
- Tab – move to the next focusable element.
- Shift+Tab – move to the previous focusable element.
- Enter – activate the current link or button.
- Space – check or uncheck a checkbox or radio button. Will also activate a button that currently has focus.
- Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
- Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
- Escape – Close an element that has appeared dynamically, such as a popup menu or dialog. After the element closes, focus should return to the element that spawned it.
In the above list, a “focusable element” is an element that is natively supported by browsers within the tab order. By default, these include links, buttons, and form fields. Elements that are not natively focusable (e.g., <div> elements) can be made focusable with the HTML tabindex attribute. For more on proper use of tabindex, see Tab and Read Order on Websites.
Additional keystrokes for common widgets are defined within the W3C WAI-ARIA Authoring Practices Design Patterns.
How to create keyboard-accessible websites
Be sure each of the following items is true of your website:
- All links and controls can be accessed using the Tab key on the keyboard.
- An easy-to-see focus indicator always shows which element has focus (see below for additional information about this technique).
- All rich, interactive features of the web page (e.g., dropdown menus, carousels, modal dialogs) comply with the recommendations of the W3C’s WAI-ARIA Authoring Practices, specifically with their Design Patterns for particular widgets. These standard recommended design patterns include specific models for how widgets should be operable with keyboard, and were determined through a collaborative effort involving many stakeholders.
- Avoid using apps, plugins, widgets, or JavaScript techniques that trap the keyboard. Users should be able to get into and out of any user interface element.
Avoid overriding browsers’ default focus indicator
All browsers display a visible outline around the element that currently has keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not do this unless you are offering a better focus indicator than the one provided by browsers (see the next section).
Enhance browsers’ default focus indicator
Some browsers (e.g., Chrome, Safari) show an easy-to-see blue outline around the element that currently has focus. However, other browsers (e.g., Firefox, Internet Explorer) show a thin dotted line. The latter can be very difficult to see. In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus. For example, the following CSS code styles links as black text on a white background by default; then reverses the foreground and background colors when the element has keyboard focus (using :focus) or when the user is hovering over it with a mouse (using :hover):
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}