dropdown-unreachable

Ensure that users can access and navigate dropdown menus using only a keyboard.

Description

Dropdown menus must be keyboard accessible to support users who cannot use pointing devices like mouses and trackpads. If you design a menu that only responds to hover or click events without keyboard support, keyboard-only users cannot access the content within.

The dropdown-unreachable rule aligns with WCAG Success Criterion 2.1.1 (Keyboard). This criterion requires that all functionality of the content is operable through a keyboard interface.

Examples

In the following example, the dropdown menu is built using a <div> that only triggers on a mouse hover. Keyboard users cannot trigger the showMenu() function because the element is not focusable and lacks keyboard event listeners.

In the following corrected example, the menu uses a <button> element. Buttons are natively focusable and respond to the ‘Enter’ and ‘Space’ keys.

How to fix?

To fix violations of the dropdown-unreachable rule, follow these steps:

• Use native HTML elements like <button> or <select> that provide built-in keyboard support.

• Ensure the trigger element is focusable using tabindex="0" if you use a non-interactive element.

• Add event listeners for ‘Enter’ and ‘Space’ keys to toggle the menu visibility.

• Use ARIA attributes like aria-expanded to communicate the menu state to assistive technologies.

• Ensure the focus moves into the menu once it opens so you can navigate the items.

Reference

• WCAG Success Criterion 2.1.1: (Keyboard)