accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Keyboard

On this page:


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.


Requirements

Why?

Official wording in the Web Content Accessibility Guidelines

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.


Guidance for Design

This section needs more content. Contribute via Github or email.

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for iOS

This section needs more content. Contribute via Github or email.


Guidance for Android

This section needs more content. Contribute via Github or email.


Guidance for Flutter

This section needs more content. Contribute via Github or email.


Guidance for Web

Native HTML interactive elements are keyboard accessible out of the box

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

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

Common mistakes

<!-- 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();" />

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>  

More guidance for Web


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email