Site menu is not keyboard operable
| Field | Value |
|---|---|
| Rule code | Manual_SiteMenu_Inoperable |
| WCAG conformance level | A |
| WCAG success criterion | 2.1.1 Keyboard |
| Must be fixed at source | No |
Description
A site menu on the page has been detected that is not fully operable with the keyboard. This creates accessibility barriers for users who rely on keyboard navigation, as they may be unable to navigate through all of the contents of the site menu, thus hindering their ability to successfully interact with the content or navigate to other pages.
How to fix
Ensure that the site menu is fully operable via the keyboard. This can be done by adding proper role attributes (role="menu" for the container, role="menuitem" for each selectable item), setting tabindex="0" on interactive menuitem elements, ensuring that functionality of menu items is singular (i.e. a menu item should either link to a new page or open a submenu, but not both), ensuring that aria-expanded states are updated when submenus are opened, enabling Space/Enter key activation on menuitems, and clearly defining element relationships using aria-controls and aria-labelledby attributes.