This page is in progress -
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:
- Ensure that focus indicator is visible
- Make an intuitive order focusable and defined in markup
- Provide a way to bypass repeating content (skip link)
- Provide a way to turn off character key shortcuts
- Make sure there are no keyboard traps
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:
- Interact with a canvas (move and resize objects)
- Resize in one direction
- Move between lists
- Sort a list
- Sort a listbox
Read about how they did it in: 4 Major Patterns for Accessible Drag and Drop.
Interesting Further Reading
How to Test This
- 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
Credits
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.