Web无障碍标准下主菜单导航键咨询及子菜单导航键建议

Great question—getting menu navigation right for accessibility is non-negotiable for inclusive web design. Let’s walk through the standard key mappings that align with WCAG guidelines and are familiar to screen reader and keyboard-only users:

Main Menu Navigation #

For horizontal or vertical main menus, here’s what users expect:

• Tab: Moves focus between main menu items one at a time. This is the primary way keyboard users traverse top-level interactive elements on a page.
• Enter / Space: Activates a main menu item. If the item has a submenu, this should open the submenu and move focus to the first submenu item. If it’s a direct link, it should trigger the navigation action.
• Left/Right Arrow Keys (for horizontal menus): Alternate way to move focus between main menu items, which is often more intuitive for users navigating a horizontal menubar.
• Up/Down Arrow Keys (for vertical menus): Same as left/right, but tailored to vertical menu layouts.
• Esc: Closes any open submenu and returns focus to the parent main menu item.

Submenu Navigation #

Once a submenu is opened, these key actions should be in place:

• Up/Down Arrow Keys: Moves focus between individual submenu items. Even if the submenu is horizontal, up/down is standard here (users don’t expect to switch direction schemes mid-navigation).
• Enter / Space: Selects the focused submenu item—either navigating to its linked page or triggering its associated action.
• Esc: Closes the submenu and returns focus to the parent main menu item. If you have nested submenus (sub-submenus), pressing Esc once closes the deepest level, pressing again closes the parent submenu, etc.
• Right Arrow Key (for nested submenus): If a submenu item has its own submenu, pressing right arrow should open that nested submenu and move focus to its first item.
• Left Arrow Key (for nested submenus): Moves focus back to the parent submenu item and closes the nested submenu.

Quick Best Practices to Pair with These Keys #

• Always show a clear, visible focus indicator around the currently focused menu item—don’t rely solely on screen reader feedback.
• Use ARIA roles and attributes like role="menubar", role="menuitem", aria-haspopup="true", and aria-expanded to help screen readers understand the menu structure and state.
• Ensure that when a submenu opens, focus is trapped within it until the user closes it or selects an item (prevents users from accidentally tabbing away into unrelated page content).

内容的提问来源于stack exchange，提问作者akhila nair