keyboard-menu

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

Description

It should be possible that all interactive elements in a menu, such as links, buttons, and dropdowns, are focusable and can be operated using a keyboard or keyboard interface. A keyboard interface refers to any mechanism that allows users to interact with the page via the keyboard, such as physical keyboards, on-screen keyboards, or other assistive devices like switch controls or speech-to-text applications.

Users should be able to navigate through the menu, select items, and interact with submenus or other interactive components.

Why is it important?

This ensures that users who have motor disabilities, vision impairments, or those who prefer or need to navigate using a keyboard or assistive technologies 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?

• Use native semantic elements that are accessible using a keyboard, such as <button>, instead of <div> or <span>.
• Ensure that each menu element is focusable by using the tabindex attribute. Set tabindex="0" to make the element part of the natural tab order.
• Use tabindex="-1" to make elements that shouldn’t be part of the tab order (like non-interactive elements) unfocusable by keyboard users.
• When using tabindex="0", ensure that interactive menu items such as buttons, links, or form controls can still be activated using the Enter or Space keys in addition to mouse clicks.
• Test the navigation by pressing Tab to ensure each item is accessible.
• Ensure that Enter or Space activates the menu item.

Example

The following example shows a menu where the elements are not accessible via the keyboard.

The following example shows a menu where the elements are accessible via the keyboard.

Reference

• WCAG 2.1.1: Keyboard
• WCAG 4.1.2: Name, Role, Value
• Technique G202: Ensuring keyboard control for all functionality