Keyboard
Success Criterion 2.1.1 Level A

Question

Can all functionality and content be accessed and operated through the use of a keyboard or keyboard interface?

Why is this Important?

People with no vision, or those with motor impairments, typically have difficulty or cannot use a mouse. They may rely completely on the keyboard or an alternate keyboard interface to access and operate content.

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 person with low vision, it is difficult for me to see and use the mouse pointer.
I want to navigate my Science assessment using my keyboard
so that I can orient myself and complete each question.

Example 2:

As a person who is blind, I use a combination of assistive technology.
I want to be able to navigate and interact on a page with my keyboard while my screen reader narrates,
so that I can complete important tasks.

Example 3:

As a user who recently broke the hand that I use to operate the mouse,
I want to be able to use the keyboard only to navigate my online course
so that I can continue my assignments.

What should you do?

  • Considering all the ways a user might interact with a page, from drop-down menus and text fields, to additional tools, make sure all appropriate functionality is available by keyboard.
  • Do not require users to complete multiple keystrokes in a short period of time or hold a single key for an extended period of time for an action to be recognized.
  • If some functions are dependent on recognizing the path of the user’s movement, rather than just the end points, these do not have to be available to the keyboard to meet this success criterion. A good example of this would be a free-hand drawing program.
  • Take into consideration that operating system level accessibility features might be in use, so be sure that keyboard functionality does not interfere with or stop working when things like modifier keys are enabled.

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. The W3C has recommendations for some webpage interactions on their WAI-ARIA Authoring Practices site.

Need technical guidance?

Additional resources to help you: