Accessible design enhances the overall user experience and allows users with disabilities to easily navigate and interact with a product.

Keyboard Navigation

Keyboard navigation provides all web and app users with a fast keyboard-only access capability and is a web accessibility feature.

Available keyboard combinations are a fundamental aspect of the interaction between disabled users and the Web as they allow users with disabilities to fully control their website or application through the keyboard. The more functionalities of your project users can handle through the keyboard, the wider the variety of assistive technologies disabled users can utilize.

Logic and Implementation

By default, with a keyboard, users can only navigate to links, buttons, and form controls. By exposing other elements to the page tab sequence, you make them focusable. The functionality of these elements can be further enhanced by enhancing the keyboard interaction which relies on specific shortcuts. For example, similarly to the <select> element, a drop-down list implements arrow-based navigation among its options.

When a native HTML shortcut implementation is present, do not prevent it. If such is not available, but the component mimics the functionality and the purpose of a native HTML element, it must also mirror its keyboard navigation and shortcuts. For more complex components, follow the widely accepted conventions and recommendations of the WAI-ARIA Authoring Practices.

In scenarios where no recommendations and conventions are available, you can implement custom shortcuts. The downside of such an approach is that each time a custom shortcut is used, the end user is expected to be educated on how to use the component.

Keyboard Support by Components

As the keyboard combinations vary between the individual UI components, each control provides a dedicated article on keyboard navigation as part of its official product documentation. In these topics, you will learn more about the keyboard shortcuts supported by the specific component you need.

Keyboard WCAG Compliance

Keyboard accessibility is a category under the WCAG Operable principle.

In WCAG 2.1, the Keyboard Accessible category provides the following success criteria: