Accessibility
Giuliomax Menu Builder is designed to support WCAG 2.2 Level AA. Navigation works fully without a mouse, dropdowns are announced to screen readers, and motion can be disabled system-wide.
About conformance. These features are built to support WCAG 2.2 Level AA, but the final conformance of your live site also depends on your content, your theme, and any custom colors you set. Test your site with the tools listed below.
WCAG 2.2 AA support
The plugin is designed around the following WCAG 2.2 success criteria relevant to navigation components:
| Criterion | Level | How it is met |
|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Built-in themes are designed to meet a 4.5:1 contrast ratio; custom color overrides must be re-checked. |
| 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.
- Color Contrast Analyzer — verify that your custom color overrides still meet the 4.5:1 minimum ratio.