Keyboard (No Exception)
Success Criterion 2.1.3 (Level AAA)

Question

Can all site or application controls and content be accessed and operated through the use of a keyboard or keyboard interface with no exceptions?

Why is this important

Some users with visual or physical impairments may not be able to use pointing devices, such as a mouse. These users need to be able to access content and navigate using keystrokes, such as the tab key, arrow keys or other keyboard commands.

Making a site or application fully functional through a keyboard will also provide users the flexibility to navigate and operate sites and applications using different types of keyboards or assistive technologies.

Whom does it benefit?

Example 1:

As a student with visual impairment,
I want to access all digital content with my keyboard
so that I can independently manage my personal data, check my grades, and advance in my education without barriers caused by mouse-only operations.

Example 2:

As a person with severe hand tremors,
I want to use my alternative keyboard as my only input device
so that I can work more quickly and have more control over the menu options and features I select when using digital tools.

What should you do?

  • Ensure all content and functions are accessible by a keyboard or a keyboard interface that allows users access via keystroke input.
    • For example, switch devices combined with alternative keyboard input, handwriting interpreters, or speech-to-text applications.
  • Do not create content that requires path-dependent input, such as signing a document with a mouse.

How do you do it?

  • Using standard HTML controls will do most of the work towards ensuring keyboard accessibility. For examples of HTML controls, look at the Using HTML form controls and links technique section at w3.org.
  • Ensure proper navigation through the keyboard interface by coordinating the keyboard tab order with the structure of the page. Make the tab order follow the visual flow of the page: left to right, top to bottom. Adjust tab order as needed by using the tabindex attribute.
    • tabindex= "0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.
    • tabindex= "-1" removes the element from the navigation sequence, but can be made focusable using javascript.
    • A tabindex= “1” or higher should NOT be used as it is a bad practice when it comes to accessibility.
  • Where functionality requires going beyond standard HTML controls, make sure they are designed in such a way that any function can be completed using the keyboard. Refer to the resources below for further explanations and examples:
  • Do not use common keyboard commands for other purposes, e.g. “Ctrl + C” commonly used for copying should not be used for any other purposes.
  • Do not use single-key shortcut commands because these may interfere with speech-to-text access.

Need technical guidance?

Additional Resources to help you: