Accessible and user-friendly mega-menus

“Mega menus” are often seen as a user-friendly method of providing all the high-level navigation choices at once. They are usually implemented as large drop-down menus under a horizontal bar of options. However, a poorly designed mega menu can lead to a negative user experience through difficult site navigation. Mega menus provide the relevant information at a glance, allowing the user to get the information they require in a more concise, direct manner.

When implementing an accessible mega menu onto your website, there are a number of key points to consider to create a better experience for all your the end-users.

There are two main approaches you can take.

Figure 1: The John Lewis website, in default view and with the mega menu showing

1. Show the menus on-mouseover and avoid complex keyboard interactions

Have a mega menu that opens when the user mouses-over the menu options, but do not open the menus with keyboard interactions. For a menu of links, the default keyboard behaviour would be to tab across the menu links and select one of the options to proceed to a landing page.

In order for this approach to be accessible, you need to ensure all options that are available in the drop-down menu are also available on the landing page. The drop-downs are intentionally not keyboard-accessible, they are properly hidden and cannot be tabbed through. The options on the landing page could be a navigation bar on the side of the page or part of the main content area.

It is critical to make sure each landing page covers everything in the menu, otherwise, users could be missing out on content. Most people won’t notice the duplication because if you hover-over an option and get a mega-menu, you would select one of the options in the menu, and never see the landing page.

A problem with on-hover menus is that, whilst it is easy for most people to dismiss the drop-down by manoeuvring the pointer away from the menu, people with low vision who rely on screen magnification have to move their entire view to do so. It is extremely frustrating.

The reverse is also a problem, if a mega menu does not fill the width of the page then it can be very easy to accidentally dismiss the menu as well.

Figure 2: Your view of the page might be 1/8th of a typical screen size

Typical screen magnification usage requires the person to pan across the page with their mouse so it’s very easy to accidentally pan off the menu, which then disappears, and you have to start the search all over again. A mitigation for this barrier is to implement a short delay, around 0.5 seconds which gives users a little time to quickly move their mouse back onto the menu.

Another potential barrier for people who rely on screen magnifiers is that it is very easy to accidentally trigger content that appears on hover, such as a mega menu. This will obscure the content beneath it, and make it hard to get to.

A mechanism must be available that allows people to easily dismiss content without disrupting their journey or moving their pointer. The easiest method is to provide a keyboard command, such as the “esc” key. It is simple and relatively well known, it would be the first key users try if they wish to close a mega menu.

Whilst not an accessibility issue per-se, the scripting of events for touch-screen devices is tricky. With a standard implementation of a hover-based drop-down, someone on a touch screen often has to press twice to access the landing page, or you might get a flash of the menu before the landing page loads.

Figure 3: The Adobe accessible mega-menu

2. Make the drop-downs accessible via keyboard and on-click.

If you want to make the mega menu keyboard (and screen reader) accessible, then you would need to apply keyboard interactions and some minimum ARIA. I’d point to the Adobe mega-menu as a good implementation.

You’ll notice that the menus are triggered on-click rather than on-hover. It is really hard to get a robust on-hover implementation across lots of browsers and scenarios. I’m not aware of a good one that works on-hover and with the keyboard. That is possibly because hover equates to focus, and click equates to pressing enter, but if you tab linearly and each menu opens as you go through, you’d have to go through every option in the menu. That would be a nightmare for someone relying on keyboard access. The advantages of the on-click approach are that it does work well across various scenarios, and it is one menu for everyone (assuming you have enough screen estate for it to appear).
The disadvantages are that on-click doesn’t always match what people (with mice) expect, and it is a more complex scripting challenge.

Is a mega menu the right choice?

Just a note of caution: Is a mega menu the right form of navigation for your site, or is it a case of having a bunch of links and you have to put them somewhere? If you have a site where people might need to skip across different sections in un-predictable ways (such as an e-commerce site like John Lewis), a mega-menu is probably a good choice.

However, if you have done some user-research and can map the user-journeys across the site, you will generally find that the ‘next’ link someone wants can be included in the content.

The ability to skip across sections and sub-section in a mega-menu provides less value than the negative impact of a complex menu. Sites that cater to novice or unfamiliar users, or really focus on user-needs (such as Gov.uk, NHS.uk, Apple.com) tend to avoid drop-down menus completely.