{"id":438461,"date":"2026-02-17T09:51:26","date_gmt":"2026-02-17T09:51:26","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&p=438461"},"modified":"2026-03-02T10:48:24","modified_gmt":"2026-03-02T10:48:24","slug":"aria-haspopup","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/aria-haspopup\/","title":{"rendered":"Max Mega Menu and the aria-haspopup attribute"},"content":{"rendered":"
\n

TL;DR:<\/strong> Automated accessibility tools often flag missing aria-haspopup<\/span>\u00a0\u00a0attributes because they assume all menus should behave like “Desktop Applications.” However, Max Mega Menu follows the W3C Disclosure Pattern<\/strong><\/a>. We use aria-expanded<\/span> , which provides a better experience for screen reader users and avoids confusing navigation “modes.”<\/p><\/blockquote>\n

If you\u2019ve recently run an accessibility audit or used an automated checker, you might have seen a suggestion to add the aria-haspopup<\/span> attribute to your menu items.<\/p>\n

Adding the aria-haspopup<\/span>\u00a0 attribute to Max Mega Menu would be a trivial change to the code, so why don’t we do it? We intentionally omit the aria-haspopup<\/span>\u00a0 attribute to ensure your site remains accessible to screen reader users. Here is why.<\/p>\n

\n

1. Following W3C’s lead<\/h3>\n

The\u00a0World Wide Web Consortium<\/b> (W3C) develops standards and guidelines to help everyone build and enjoy a web based on the principles of accessibility, internationalisation, privacy and security.<\/p>\n

The w3.org<\/a> homepage itself uses a mega menu, and does not<\/strong>\u00a0use the aria-haspopup<\/span>\u00a0 attribute:<\/p>\n

\"\"<\/a><\/p>\n

According to the W3C, most website navigations should follow the Disclosure Pattern:<\/a><\/p>\n

A pattern more suited for typical site navigation with expandable groups of links is the\u00a0Disclosure Pattern<\/strong>.
\n— https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/menubar\/examples\/menubar-navigation\/<\/a><\/p><\/blockquote>\n

The W3C notes that the alternative “Menubar<\/a>” pattern (which does<\/em> require the aria-haspopup<\/span>\u00a0 attribute) is intended for application-like interfaces (think Google Docs or online versions of desktop applications) and can actually make standard website navigation more difficult for screen reader users by forcing them into a specific “Application Mode.”<\/p>\n

Max Mega Menu follows the disclosure pattern, with some enhancements.<\/p>\n

2. aria-expanded<\/code> vs. aria-haspopup<\/code>: What’s the difference?<\/h3>\n

By using aria-expanded<\/span>\u00a0, Max Mega Menu tells the user exactly what is happening: they are toggling the visibility of a sub menu. When aria-haspopup<\/span>\u00a0is used incorrectly on a standard link, a screen reader may expect a complex desktop-style menu where the user must use arrow keys to move around, which can lead to users getting “stuck” in the menu.<\/p>\n

The core of the confusion often lies in these two attributes. While they might seem similar, they tell a screen reader user very different stories:<\/p>\n\n\n\n\n\n\n
Attribute<\/th>\nThe Message Sent to Users<\/th>\n<\/tr>\n<\/thead>\n
aria-expanded<\/code><\/td>\n“This button controls a section of content that is currently hidden or visible.”<\/em><\/td>\n<\/tr>\n
aria-haspopup<\/code><\/td>\n“This button triggers a temporary overlay, like a context menu or a dialog box.”<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

3. We Prioritise the “Disclosure” Pattern<\/h3>\n

By following the Disclosure Pattern<\/a> (and the example code given<\/a>, which includes<\/strong> the aria-expanded<\/span>\u00a0 attribute and omits<\/strong> the aria-haspopup<\/span>\u00a0 attribute), we ensure:<\/p>\n