Accessibility
Giuliomax Menu Builder is built to meet WCAG 2.2 Level AA. Navigation works fully without a mouse, dropdowns are announced to screen readers, and motion can be disabled system-wide.
On this page
WCAG 2.2 AA compliance
Keyboard navigation
ARIA attributes
Focus management
Reduced motion
Testing your menu
WCAG 2.2 AA compliance
The plugin is tested against the following WCAG 2.2 success criteria relevant to navigation components:
| Criterion | Level | How it is met |
|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | All built-in themes are tested to meet a 4.5:1 contrast ratio for text. |
| 2.1.1 Keyboard | A | All functionality is operable via keyboard alone. |
| 2.1.2 No Keyboard Trap | A | Focus can always leave the menu without using a pointing device. |
| 2.4.3 Focus Order | A | Focus order follows the visual reading order of the menu. |
| 2.4.7 Focus Visible | AA | A visible focus ring is rendered on every interactive element. |
| 2.4.11 Focus Appearance | AA | Focus indicators meet minimum size and contrast requirements (new in WCAG 2.2). |
| 4.1.2 Name, Role, Value | A | All interactive elements have an accessible name and correct ARIA role. |
Keyboard navigation
| Key | Action |
|---|---|
| Tab | Move focus to the next menu item or interactive element. |
| Shift + Tab | Move focus to the previous item. |
| Enter / Space | Activate a link, or open / close a dropdown. |
| ↓ / ↑ | Move focus through items inside an open dropdown or mega menu panel. |
| → / ← | Move between top-level items. |
| Escape | Close the current dropdown or mega menu panel and return focus to the parent item. |
| Home / End | Jump to the first / last item in a dropdown list. |
ARIA attributes
The plugin automatically adds the following ARIA attributes to the rendered markup:
role="navigation"andaria-labelon the<nav>element (label matches the menu name in WordPress).aria-haspopup="true"andaria-expandedon top-level items that have a dropdown or mega menu.aria-controlslinking the trigger button to its panel.role="menu"androle="menuitem"inside dropdowns.aria-current="page"on the item that corresponds to the current page.
You do not need to configure any of this — it is applied automatically based on the menu structure.
Focus management
- When a dropdown opens, focus moves to the first item inside it.
- When a dropdown closes (via Escape or by moving focus away), focus returns to the triggering item.
- The mobile menu overlay traps focus inside it while open (focus cannot tab outside the panel). Closing the overlay returns focus to the hamburger button.
Reduced motion
All transitions and animations respect the prefers-reduced-motion: reduce CSS media query. When the user has enabled "Reduce motion" in their operating system's accessibility settings:
- Dropdown slide/fade animations are replaced with instant show/hide.
- Mobile menu open/close transitions are instant.
- The announcement bar entrance animation is disabled.
- Entrance animations on menu items are disabled.
Testing your menu
After configuring your menu, use the following tools to verify accessibility:
- Keyboard only — unplug your mouse and navigate the entire menu using only Tab, arrow keys, Enter, and Escape.
- axe DevTools — a free browser extension that runs automated WCAG checks on the live page.
- NVDA / VoiceOver — screen readers to verify that dropdown states and labels are announced correctly.
- Colour Contrast Analyser — verify that your custom colour overrides still meet the 4.5:1 minimum ratio.