Whole page
Submenu opens on hover only
WCAG 2.2 success criterion 2.1.1 Keyboard (Level A)
- WCAG 2.2
- 2.1.1 Keyboard
- Level
- A
- Default severity
- Needs review
- Available in
- Free
Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.
Why does it matter?
Many older themes open dropdown menus only when the mouse hovers over the parent item. Keyboard users reach the parent link, but the submenu stays hidden, so every page under it is out of reach for them.
Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.
What does Lumtera flag?
Found by the widget tests (review mode's Keyboard tab, "Test menus and pop-ups"): a submenu in the header or navigation, with no toggle button of its own, that a hover rule or script shows for the mouse but that stays hidden when its parent link takes keyboard focus. Each is for review, up to ten per page.
Check ID page-hover-menu, as shown in review mode and saved results.
How do I fix it in WordPress?
Open the submenu for keyboard users too. The best fix is a toggle button with aria-expanded next to the parent link (the Navigation block in block themes has one). At the least, show the submenu with :focus-within as well as :hover in the theme's CSS. Then Tab through the menu to check every link can be reached.
Example
.main-menu li:hover > .sub-menu { display: block; }
.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu { display: block; }
How do I check the fix?
- Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the page passes.
- Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.
Check your pages with Lumtera
This check is free. Open any post, choose Accessibility in the admin bar, then the Keyboard tab: Lumtera numbers every Tab stop and checks the page with the keyboard, theme, menus and footer included, one page at a time. Lumtera Pro's Page checks screen (Lumtera → Checks → Page checks) runs the same menu and pop-up tests on every page you select, at desktop width and, with "Also check at phone width", again at 390 pixels, and saves the results with the page; scheduled checks have no browser, so they do not run them.
Related checks
-
WCAG 2.5.7 · AANeeds review
Dragging may be the only way to use this
-
WCAG 2.4.2 · AError
Page title is missing or generic
-
WCAG 3.1.1 · AError
Page language is missing or not valid
-
WCAG 1.3.1 · ANeeds review
Page headings are missing an H1 or skip levels
-
WCAG 1.3.1 · ANeeds review
Page landmarks are missing or share a name
-
WCAG 2.4.1 · ANeeds review
No working way to skip to the main content
Start with the free plugin today
All 69 content checks and 33 whole-page checks, fixes you approve with undo, and the site report — free, with no account and no page limits.