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.

Requirements

• All actionable components can be reached and activated using the keyboard alone.

Why is it important

• This ensures that people with mobility or dexterity impairments who do not use a mouse can successfully complete their goals.
• Lots of people don’t rely on a mouse, trackpad or touchscreen to use websites and apps:
  • People who have developed Repetitive Strain Injuries or Arthritis;
  • Screen reader users;
  • Computer power users find keyboard keys and shortcuts to navigate the web.
• 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.

Benefitted disability types

Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Blind users also typically use a keyboard for navigation. Users without disabilities may use a keyboard for navigation because of preference or efficiency.

Summary

Make sure every task can be completed using just a keyboard.
It must be possible for someone using a keyboard to complete all tasks in a website or app. This ensures that people with mobility impairments who do not use a mouse can successfully complete their goals.

Common mistakes

• A custom widget has been created, but the necessary keyboard support has not been provided. For example:
  • buttons created using span or div elements rather than button or input elements
  • links created using the span or div, rather than the a element
  • links using a a element but without a URL for their href attribute, or if preventDefault() has been used
• An <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;
• A dialogue opens but cannot be dismissed by touch, because it does not have a close button;
• The tabindex attribute has been used with a value of “-1” to mistakenly remove it from the tab order.

Design Guide

Keyboard Example for Web

Native HTML interactive elements are keyboard accessible out of the box

• Use native HTML elements that provided keyboard access automatically;
• For inactive elements, ensure focus is disabled for controls that support the disabled attribute.

If you don’t make use of HTML interactive elements, you need to implement keyboard accessibility yourself

• If you create an interactive element yourself, make it focusable with the ‘Tab’ key with 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. Look at the keyboard support and focus management guidance in the ARIA Authoring Practices Guide, which covers many common user interface design patterns.
  
  One of the Rules of ARIA is that: “All interactive ARIA controls must be usable with the keyboard.”

Hide hidden or off-screen elements for keyboard users and screen reader users too

• Hidden content (that is off-screen like a side-drawer, or behind other content such as a pop-over, for example), should not be navigable for users of assistive technology as they may think they can interact with this content.
  • Use aria-hidden=”true” and tabindex=”-1″ on each element that would otherwise be focusable, or the inert attributed, which needs to be polyfilled, on an ancestor element.

Example: A link with an image

<!-- standard element that is interactive by default -->
<a href="..."><img src="back.jpg" alt="back" /></a>

Failure example:

<!-- clickable image that is not keyboard accessible -->
<img src="back.jpg" alt="back" onclick="myClickEvent();" />

Example: A carousel that is keyboard accessible

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>

Failure example:

Listening for touch gestures without providing equivalent control via keyboard:

<script type="text/javascript">
  // perform some action on touch
</script>

...

<div
  ontouchstart="touchStart(event);"
  ontouchmove="touchMove(event);"
  ontouchend="touchEnd(event);"
  ontouchcancel="touchCancel(event);"
>
  <!-- Carousel content -->
</div>

References

1. Inert Polyfill – A11ycasts #02 by Rob Dodson and Google
2. Keyboard accessibility article by WebAIM
3. Accessible JavaScript article about JavaScript event handlers by WebAIM
4. Using the tabindex attribute
5. Ridiculously easy trick for keyboard accessibility
6. W3C’s detailed explanation of this guideline with techniques and examples.
7. Accessibility Guidelines- Github.io