Navigation menus are one of the most important elements on any website. They help users find what they’re looking for and understand how your content is structured. But for people using screen readers, a menu that looks fine visually might be confusing, repetitive or completely inaccessible if it’s not coded correctly.
In WordPress, menus are often created through themes or page builders. While some themes do a decent job of adding semantic markup, many still fall short when it comes to accessibility. If your menu doesn’t have clear structure or labels, screen reader users might not even know it’s a menu.
This guide will show you how to make your WordPress menus more accessible, both manually and using the Web Accessibility Toolkit plugin. You’ll learn how to add ARIA roles and labels, what screen readers need to understand menus, and how to test your improvements.
Why Menus Need Accessibility Attention
Menus are used by everyone, but users navigating by keyboard or screen reader rely heavily on semantic clues. These clues are usually missing if your menu is built purely for visual design.
Common Issues with WordPress Menus
- Missing
role="navigation"or semantic wrappers - No accessible label to describe the purpose of the menu
- Incorrect use of heading structure or list elements
- Overuse of visual-only dropdowns that don’t work with keyboard focus
These issues don’t just affect usability – they can also cause your site to fail WCAG 2.1 accessibility checks and put you at legal risk under the ADA or other digital accessibility laws.
What Screen Readers Need from a Menu
Screen readers don’t see your site the way sighted users do. They interpret structure through semantic HTML and ARIA attributes. To properly announce a menu, screen readers need:
- A container element with
role="navigation" - A label that describes what the menu is for, such as “Main menu” or “Footer links”
- List items (
<li>) inside an unordered list (<ul>) - Keyboard-accessible links
Without these elements, the menu may be announced as a generic region or ignored entirely.
How to Make Menus Accessible Using the Web Accessibility Toolkit
If you’re not comfortable editing theme files or adding custom code, the Web Accessibility Toolkit plugin provides a way to make your menus accessible from the WordPress dashboard.
Step 1: Install the Plugin
- Go to Plugins > Add New
- Search for Web Accessibility Toolkit
- Click Install, then Activate
Step 2: Open the ARIA Menu Settings
After activation, go to the Web Accessibility menu in the sidebar of your admin area and select the ARIA tab. Scroll down to the Menus section. You’ll see a list of all registered WordPress menus on your site.
Step 3: Add ARIA Labels and Roles
For each menu, you can:
- Enable
role="navigation" - Add a custom
aria-labelsuch as “Main navigation” or “Footer links”
This tells screen readers what the region is and helps users understand its purpose. For example, if you have multiple navigation menus, adding different labels prevents confusion.
Step 4: Save and Test
After adding labels and roles, click Save. These attributes will be applied automatically to the HTML container for each selected menu. You don’t need to touch your theme files or write custom JavaScript.
What Happens Behind the Scenes
The plugin uses WordPress hooks and filters to insert the ARIA attributes at runtime. It targets the wp_nav_menu function output, so it works with most themes and builders that use standard WordPress functions to render menus.
This keeps your site compatible with future updates and lets you change themes without losing accessibility features.
Manual Option: Editing Your Theme (Optional)
If you prefer to do things manually or your theme doesn’t use standard menu functions, you can edit your theme’s template files. Look for the wp_nav_menu() function in header.php or footer.php.
Here’s an example of how to add ARIA roles and labels manually:
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-menu', 'container' => 'nav', 'container_class'=> 'menu-wrapper', 'container_aria_label' => 'Main navigation', 'container_role' => 'navigation' ) );
Note that not all themes support container_aria_label or container_role natively. In that case, you would need to wrap the menu in a custom <nav> tag and apply the attributes directly in your HTML.
How This Helps with WCAG Compliance
Making your navigation accessible helps meet several success criteria from the WCAG 2.1 guidelines (opens in new tab), including:
- 1.3.1: Info and Relationships — structure must be conveyed to users
- 2.4.1: Bypass Blocks — users should be able to skip repetitive navigation
- 2.4.6: Headings and Labels — labels should describe the purpose of each region
- 4.1.2: Name, Role, Value — components must expose roles and labels to assistive tech
These improvements not only help screen reader users but also improve keyboard navigation and overall usability for all users.
How to Test Your Menus for Accessibility
Once you’ve added ARIA attributes, it’s important to verify they’re working. Here are a few quick ways to test:
1. Use a Screen Reader
If you’re on Windows, try NVDA (free) or JAWS. On macOS, turn on VoiceOver (built-in).
Tab through your page and listen for how the menu is announced. You should hear something like “Main navigation region” or “Footer links navigation.”
2. Use a Browser Extension
Extensions like axe DevTools or the WAVE Evaluation Tool can scan your page and flag missing or misused ARIA attributes.
3. Try Keyboard Navigation
Press Tab and Shift + Tab to move through your site. Make sure the menu is accessible, focusable, and logically ordered. You should be able to reach all links and dropdowns without using a mouse.
Summary
Accessible navigation menus are essential for an inclusive WordPress site. They make it easier for people using screen readers to understand your site structure and navigate between pages without confusion.
With the Web Accessibility Toolkit plugin, you can make your menus accessible without editing theme code. You’ll be able to apply ARIA roles and labels to any menu from the dashboard, improving your site’s compliance with WCAG, ADA, and Section 508 standards.
Whether you manage a blog, an eCommerce store, or a government website, ensuring your menus are accessible is a simple but powerful step toward better usability for everyone.