Menus should expose one focusable item (roving tabindex)

Rule menu-roving-tabindex · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

In the menu/menubar pattern one item is tabbable (tabindex="0") and the rest use tabindex="-1", with arrow keys moving focus. A menubar with no tabbable item is unreachable; a popup role="menu" correctly keeps every item tabindex="-1" until it opens and receives focus programmatically. If every item is tabbable the keyboard experience is non-standard. (Structural check.)

How to fix#

In a menubar, make one menuitem tabindex="0" and the others tabindex="-1", moving focus with arrow keys. In a popup menu (menu button pattern), keep all items tabindex="-1" and move focus into the menu when it opens. Skip if you use aria-activedescendant.

Example#

<ul role="menubar"><li role="menuitem">File</li><li role="menuitem">Edit</li></ul>

<ul role="menubar"><li role="menuitem" tabindex="0">File</li><li role="menuitem" tabindex="-1">Edit</li></ul>

Example#

<ul role="menubar"><li role="menuitem" tabindex="0">File</li><li role="menuitem" tabindex="0">Edit</li></ul>

<div><button aria-haspopup="true" aria-expanded="false">Actions</button><ul role="menu"><li role="menuitem" tabindex="-1">Copy</li><li role="menuitem" tabindex="-1">Paste</li></ul></div>

A popup menu correctly keeps every item out of the Tab order; focus moves into it when it opens.

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Menu & Menubar