Understanding SC 2.1.1 Keyboard

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.

This success criterion requires that all functionalities must be accessible and operable to users using a keyboard. Normally users with disabilities & elderly people depend a lot on keyboard to navigate to all parts of the web page & if any part of the web page is not operable with keyboard then it fails this check point. People generally use tab to move forward, shift+tab to move backward & screen reader users use arrow keys a lot to navigate. This success criterion addresses the needs of people with motor disabilities, visually challenged users & elderly users.

Points to Remember

Make sure all elements on the page buttons, links, form controls etc. are reachable by tab key.

Make sure that users are able to activate the buttons, links & form controls using the enter and/or spacebar keys.

Write clean HTML & CSS as it is keyboard operable by default & doesn’t require any special tweaks.

Make sure that there is a visible focus for all the active elements on the page.

Make sure that focus order is logical & intuitive.

Provide tabindex=0 for custom UI elements so that they are focusable.

Provide appropriate event handlers for custom scripted elements so that they are operable by their respective keys.

Avoid access keys if possible. If not, at least, ensure they don’t conflict with the user agent and/or AT shortcut keys.

Make sure that there is no time limit to perform any action using the keyboard when more than one key is required to operate a control.

More Accessibility Articles

About Raghavendra Satish Peri

Peri as he is fondly called brings in rich experience in Digital Accessibility; He has worked with various clients ranging from Travel & Hospitality, ecommerce, Entertainment, Banking & Finance. Presently, he works at Deque Software as Digital Accessibility Consultant slaying web accessibility & mobile accessibility challenges.