keyboard-interactive

Ensure that all elements on your page are focusable and can be operated using a keyboard or keyboard interface.

Description

It should be possible to access all functionality on a webpage using a keyboard or a keyboard interface. A keyboard interface is any mechanism that allows users to input keystrokes into a system without a physical or wired keyboard, such as, on-screen keyboards, external wireless keyboards, switch devices, or speech-to-text applications.

Why is it important?

This ensures that users with vision impairments or those who rely on alternative input devices can fully interact with web content. It also ensures that mobile users can access all functionality without relying solely on touch-based gestures.

How to fix?

• Ensure all interactive elements on the page, such as links, buttons, form controls, and menus can be accessed using both a keyboard and a mouse.
• Use native semantic elements that are accessible using a keyboard, such as <button>, instead of <div> or <span>.
• Provide keyboard equivalents for actions typically performed with a mouse, such as dragging and dropping items.
• Use the tabindex attribute on non-standard HTML elements to include them in the keyboard focus order. Set the value to 0 to include them and -1 to exclude them from the focus order.

Example

The following example is of a link that can only be operated using a mouse.

The following example is of a link that can be operated using a mouse and keyboard. It also adds the aria-label which ensures screen readers understand what the element does.

Reference

• WCAG 2.1.1: Keyboard
• Technique G202: Ensuring keyboard control for all functionality