Broken Navigation Demo

Why This Navigation is Bad Practice

This page demonstrates a navigation pattern where dropdown menus automatically expand when they receive keyboard focus. While this might seem helpful, it is a significant accessibility issue for several reasons:

Unexpected Behavior and Loss of Predictability (WCAG 3.2.1)

WCAG 2.1 Success Criterion 3.2.1 states that "When any user interface component receives focus, it does not initiate a change of context." Automatically opening a menu when a user tabs to it is a change of context. Keyboard users expect to be able to tab through the main navigation links without the page changing unexpectedly. This behavior can be disorienting and frustrating, violating the principle of predictable operation.

The Keyboard Trap

When a menu opens on focus, the tab order is immediately changed to move into the newly opened submenu. A user who simply wants to navigate past the "About" or "Products" link to get to "Support" or "Contact" is now forced to tab through all of the submenu items first. This is a form of a keyboard trap, as it hinders free navigation across the page. To escape the submenu, the user might have to press the tab key multiple times, or know to press the Escape key, which is not always intuitive.

Disruption of User Flow

Sighted keyboard users can see the main navigation links and may intend to quickly tab from "Home" to "Contact". The automatic expansion of menus disrupts this flow, forcing them into a detour they did not want. For screen reader users, the sudden announcement of a new list of links can be equally disruptive and confusing. The user should always be in control of when and how they explore different parts of the page.

Correct Implementation

A better approach is to allow users to open submenus with a specific key press (like Enter, Space, or the down arrow key) and to close them with the Escape key. This provides a predictable and user-controlled experience for everyone.