It must be possible for someone using only a keyboard to access all content and complete all tasks.
On this page:
This ensures that people with mobility or dexterity impairments who do not use a mouse can successfully complete their goals.
Many people don’t rely on a mouse, trackpad or touchscreen to use websites:
Making a website or app accessible with a keyboard also ensures that it is accessible with other input devices that emulate keyboards, like Switch devices or Sip-and-puff devices.
See Rob Dodson explain ‘Focus’ in this short video:
tabindex="0". When this element is disabled set
tabindex="-1"to remove it from the tab order.
Also make sure that you implement responses to keyboard presses that users expect.
“All interactive ARIA controls must be usable with the keyboard.”
tabindex="-1"on each element that would otherwise be focusable, or the
inertattributed, which needs to be polyfilled, on an ancestor element.
divelements rather than
div, rather than the
aelement but without a URL for their
hrefattribute, or if
preventDefault()has been used
<a>element has been used as the basis for a button, but the additional keyboard interaction (activation with the space key) has not been provided;
tabindexattribute has been used on an element with a value of
-1to mistakenly remove it from the tab order.
<!-- standard element that is interactive by default --> <a href="..."><img src="back.jpg" alt="back" /></a>
<!-- clickable image that is not keyboard accessible --> <img src="back.jpg" alt="back" onclick="myClickEvent();" />
A carousel that supports swiping left and right touch events such as touchstart, touchend, and touchmove can supplement these gestures with keyboard access using buttons, or by watching key presses:
<button onClick="...">Previous</button> <button onClick="...">Next</button>
Listening for touch gestures without providing equivalent control via keyboard:
This section is just a placeholder
Note: If you’re testing on a mac using Safari or Firefox, you’ll need to do this first: https://dequeuniversity.com/mac/keyboard-access-mac. Alternatively, checking just in Edge or Chrome is enough for this.
2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
Note 1: This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.
Note 2: This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
See the W3C’s detailed explanation of this guideline with techniques and examples.