BugWP logo BugWP
Back to Community
Home / Community / Plugin → Max mega menu

Resolving Max Mega Menu Accessibility Warnings: A Guide to Common Issues

16 threads Sep 7, 2025 Plugin → Max mega menu

Content

Max Mega Menu is a popular WordPress plugin known for its efforts in creating accessible navigation. However, users often encounter accessibility warnings from tools like Lighthouse, AXE DevTools, or WCAG validators. This guide explains the most common accessibility-related issues and how to resolve them.

Common Accessibility Issues and Their Solutions

1. Missing Accessible Name for Toggle Buttons

The Problem: Tools like Google PageSpeed Insights or Lighthouse report "Buttons do not have an accessible name" for the mobile menu toggle button. This happens when a screen reader encounters a <button> element without a proper label and can only announce it as "button," making it unusable.

The Solution: Navigate to Mega Menu > Menu Themes > Mobile Menu. In the Toggle Bar Designer, edit your toggle block (e.g., "Toggle Block 1") and ensure the "Label" field is filled in with a descriptive name like "Toggle Menu." This should automatically add the necessary aria-label attribute. If the issue persists, double-check that you are editing the correct menu theme.

2. Duplicate ID Values in Menu HTML

The Problem: WCAG validators may flag a failure of Success Criterion 4.1.1 due to duplicate ID values (e.g., id="mega-menu-10260-0") within the menu's HTML structure. Every ID on a page must be unique.

The Solution: This is typically a conflict caused by another plugin or the theme. The first step is to perform a conflict test. Deactivate all other plugins temporarily and switch to a default WordPress theme like Twenty Twenty-One. If the error disappears, reactivate your plugins one by one to identify the culprit. Contact the developer of the conflicting theme or plugin for support.

3. Insufficient Color Contrast on Elements

The Problem: Accessibility checkers report insufficient color contrast, particularly on the mobile menu toggle button or other menu elements. This makes text hard to read for users with low vision.

The Solution: Color contrast is primarily controlled by your active theme's CSS. To fix this, you will need to add custom CSS to your site. Use a color contrast checker to find compliant color values. Then, add CSS rules to your theme's Customizer or a custom CSS plugin to override the existing styles for elements like .mega-toggle-animated or .mega-menu-link.

4. aria-expanded on Anchor Tags

The Problem: AXE DevTools might report that aria-expanded is not allowed on <a> tags without an explicit role.

The Solution: For top-level menu items that have a submenu, enable the "Disable Link" option in the menu item's settings within the WordPress admin. This changes the element from an anchor tag to a <button> tag, which is the semantically correct element for a control that toggles a submenu open and closed.

5. Screen Reader Announcing Submenu State

The Problem: Screen reader users may not be notified when a submenu is expanded or collapsed via keyboard navigation, even if the aria-expanded attribute is changing.

Note: Some users have reported that the aria-expanded attribute needs to be on the <span> element with the class .mega-indicator instead of the parent anchor tag for the state change to be properly announced. This appears to be a nuanced issue that the Max Mega Menu team may be investigating.

Important Notes on Testing Accessibility

  • Test with Real Screen Readers: Automated tools are helpful for catching code issues, but they cannot replicate the full experience of a user relying on a screen reader like NVDA, JAWS, or VoiceOver. Manual testing is essential.
  • Check for Conflicts: Many reported "bugs" are actually conflicts between Max Mega Menu and another plugin or the site's theme. Always test with other plugins disabled and a default theme active to confirm the source of an issue.
  • Interpret WCAG Guidelines: Compliance can be subjective. The official WCAG guidelines are open to interpretation, and different auditing tools may report different results. Using the plugin's free version to test on your own site is the best way to verify it meets your specific requirements.

By following these steps, you can address the most frequent accessibility warnings associated with Max Mega Menu and create a more inclusive experience for all users.

Related Support Threads Support