Navigation Menu Accessibility

Best Practices

A navigation menu is a list of links. A link item must be a real <a> element with a valid href attribute, so that selecting it navigates to a URL.

The component also styles <button> items. A button item must be a real <button> element, never a styled <div> or <span> .

Do not add role="menu" or role="menuitem" . A navigation menu is not an ARIA menu, and those roles would promise keyboard behaviour the component does not provide. For commands that run JavaScript without leaving the page, use a menu instead.

Interaction Design

This section provides interaction design for keyboard and screen reader users.

Keyboard

The TAB key moves focus between items, and ENTER activates the focused item. A focused button item also activates with SPACEBAR .

Screen Reader

A link item must announce with a role of “link”, and a button item with a role of “button”.

The link that reflects the current URL should set aria-current="page" to provide assistive technology with programmatic state.