Skip to main content

Whole page

Menu or disclosure toggle does not work as announced

WCAG 2.2 success criterion 4.1.2 Name, Role, Value (Level A)

WCAG 2.2
4.1.2 Name, Role, Value
Also maps to
2.1.1 Keyboard
Level
A
Default severity
Error
Available in
Free

Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.

Why does it matter?

Menu buttons, accordions and "show more" toggles tell screen readers whether they are open with aria-expanded. When that state sits on something keyboard users cannot reach, never changes, or the toggle has no name, screen reader users hear "button, collapsed" and cannot tell what it does or whether it worked.

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: in review mode's Keyboard tab, "Test menus and pop-ups" clicks each aria-expanded toggle with a script and presses Escape, then puts the page back. Errors: aria-expanded on an element keyboard users cannot focus, and a toggle with no name. For review: the state does not change when activated, or it says expanded but nothing appears. A tip: a menu that does not close with Escape or does not return focus to its button (recommended practice, not a WCAG requirement). Up to 40 widgets per run; links and form submissions are cancelled and new windows are not opened.

Check ID page-disclosure, as shown in review mode and saved results.

How do I fix it in WordPress?

Use a <button> with aria-expanded="false" as the toggle, switch aria-expanded to "true" when it opens what it controls, and give it a name (visible text, or an aria-label such as "Menu"). For menus, close the submenu on Escape and move focus back to the button. In block themes the Navigation block does this for you; with a custom menu, check the theme's or plugin's settings, or ask its author.

Example

Flagged on the rendered page
<div class="menu-toggle" aria-expanded="false">☰</div>
Fixed
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu">Menu</button>

How do I check the fix?

  1. 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.
  2. 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.

All checks

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.