Make all functionality available through the keyboard

Computer keyboard
Image description: A computer keyboard where all the keys are colored in with multiple colors of red, light orange, turquoise, purple, pink, yellow, and light green.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Full keyboard functionality is accessible to people who rely on keyboards.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

All functionality that's available through touch and computer mouse users should also be available to keyboard users.

This references WCAG criterion 2.1.1 Keyboard (Level A).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

Basic Keyboard Access

Keyboard accessibility is enabled in the browser by default, and most interactive elements are keyboard focusable by default as well. It’s important not to remove or deactivate any of these default measures, but rather enhance them instead.

Make sure to take into account all the guidelines in the keyboard tag. Keyboard accessibility includes:

Here are some common interactions that are fairly straightforward. As long as the focus indicator is visible and the focus order is intuitive, that means these interactions are keyboard accessible.

  • Browsing the navigation
  • Filling out a form
  • Accessing buttons and links

Advanced Keyboard Access

There are some interactions that are more challenging to ensure that they are keyboard accessible. These usually require complex movement, for example, digital drawing programs.

This relates to using single-pointer gestures (instead of path-based gestures). If possible, it’s better not to use path-based gestures. However, sometimes they are more intuitive for a certain interaction (such as using drag-and-drop to resize an object to move an object from one list to another).

In this case, it’s important to translate these gestures into something that can be used by the keyboard (especially the tab, enter, space, and arrow keys, as those are the most common key commands).

Salesforce has excellent examples and documentation for their keyboard accessible components. This includes:

Read about how they did it in: 4 Major Patterns for Accessible Drag and Drop.

Interesting Further Reading

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Use the website/app with just the keyboard (no computer mouse)
  • (It helps to create a list of the major flows and interactions and go through them one-by-one)
  • Make note of anything that cannot be done with the keyboard


No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)