Skip to content

Take 22% off using code GET22. Hurry, ends soon!

Web Accessibility Toolkit for WordPress
Get Started

Menu Roles

The Menu Roles feature in Web Accessibility Toolkit allows you to add role="navigation" to your WordPress menus. This helps define their purpose to assistive technologies, especially when the theme does not use semantic markup like the <nav> element or lacks the appropriate ARIA roles.

You can select which WordPress menus should receive this enhancement. This is useful for adding clarity and improving keyboard navigation for users relying on screen readers or other assistive devices.

What accessibility issue does this fix

Many WordPress themes either use non-semantic containers for menus (like <div> or <ul> elements) or neglect to add a role="navigation" attribute to clearly identify the purpose of the menu.

By assigning a navigation role, you address key accessibility concerns related to:

This makes it easier for users to navigate your site by skipping directly to navigation regions using their screen reader’s landmark shortcuts.

How does Menu Roles affect accessibility

When role="navigation" is added to a menu, screen readers can recognize the section as a navigational landmark. This allows users to:

  • Jump directly to the menu
  • Understand its purpose
  • Navigate between different navigation areas if your site has more than one

Without this role, the menu might be read as a generic list or div, offering no indication of its purpose, which can be especially frustrating for keyboard or screen reader users.

How to enable Menu Roles using Web Accessibility Toolkit

  1. Go to Settings > Web Accessibility.
  2. Open the Roles tab.
  3. Find the Menu Roles section at the top.
  4. Check the boxes next to the WordPress menus you want to enhance.
    • These menus must be created through Appearance → Menus.
  5. Click Save Changes.

If you’re using the PRO version, you can select unlimited menus. The free version allows up to 2.

How to confirm that Menu Roles is working

  1. Visit a frontend page where the selected menu appears.
  2. Open Developer Tools (right-click → Inspect Element).
  3. Locate the container for your menu (e.g. a <div> or <ul> element).
  4. Check for the role="navigation" attribute on that element.
  5. Optionally, use a screen reader (e.g. NVDA or VoiceOver) to verify that the menu is announced as a “navigation region.”

If your theme already uses a <nav> tag with the correct role, no changes will be made.