How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible (2024)

To make the most of limited page space, web designers frequently employ drop-down menus. A drop-down menu is a list of links that is hidden initially and revealed when the user interacts with the main navigation or parent menu. These links descend vertically, or 'drop down.'

Typically the hidden menu, or submenu, is shown on a hover event, when a user moves the mouse over a parent item. The submenu remains visible until the user disengages with the menu. This lets designers place more links on a page without cluttering the display.

In the example below, a drop-down menu labeled 'Documentation' opens a submenu containing links to different documentation resources.

Image Source

A perfect solution, right? Well, not quite yet. Drop-down menus are convenient for most of us. But, if these menus fail to account for web accessibility, they become more of an obstacle than a convenience for some.

Accessible drop-down menus are important because they help people with disabilities browse your site. More specifically, they assist those experiencing visual, motor, and cognitive limitations.

If your drop-down menus are not accessible, these users may miss out on key sections of your website, and it may take them a long time to find the information they need. As a result, your menus will detract from their user experience and users may not make a return visit (and, of course, it's not fair to them).

To prevent this from happening, this post will explain the fundamentals of drop-down menu accessibility that website administrators and developers should know when creating them. Later on, we'll discuss how these concepts can be applied to fly-out menus. Let's get started.

How Might People With Disabilities Use Drop-Down Menus?

It's important to understand how site visitors with disabilities use your navigation so you know how to address accessibility problems.

Someone living with multiple sclerosis, for example, may have muscle spasms, tremors, or muscle weakness. These symptoms make it difficult to hold and control a computer mouse, so your menus should be accessible by a keyboard in addition to a mouse cursor. When the user presses an appropriate key, the drop-down menu becomes visible, just as it would for someone using a mouse.

If you hover over a link in a menu with a mouse, you also expect to see a change in background color or border color. Someone using a keyboard needs the same visual cue so they know which link they have currently selected —this is called the focus style. A keyboard user can't reference the mouse pointer to tell where they are on the page, so a clear focus style is crucial.

We also need to take into account common user interface practices that not everyone takes for granted. For example, users with cognitive disabilities may not realize that some drop-down menu items are hidden. This can be a problem on mobile websites too, where navigation is often toggled by a hamburger icon.

Lastly, the larger the menu, the more potential for poor accessibility. Mega menus, like the one pictured below, are a type of drop-down menu that displays submenu links in a large box. Mega menus may have images or video as part of the menu, and often have links headed by topic.

As the name implies, mega menus contain a lot of information, so they must be organized intuitively. A poorly organized mega menu is less usable overall if it fails to guide users to their destination, and this is especially true for users with cognitive disabilities.

With these considerations in mind, let’s now unpack how drop-downs can be made accessible from the ground up.

How to Make a Web-Accessible Drop-Down Menu

The first step to building an accessible drop-down menu is to plan your site structure. That is, figure out your top-level pages that will appear in the main navigation, then determine which of those need child pages.

Below is an example of the basic structure for navigation with drop-down menus. In the example, the “Services” page has four child pages, and the “Blog” page has three child pages. So, there will be two submenus that would drop down, triggered by an interaction with the “Services” and “Blog” elements.

Child pages can also have their own children. For example, you might have two child pages for the “Marketing” category on your blog, like “Content marketing” and “Email marketing”. This type of navigation is called a two-level submenu.

Most content management systems have navigation settings that allow you to set child pages. Usually, you can configure your navigation links through drag-and-drop.

However, too many levels of a drop-down menu can make your navigation difficult to use. For example, someone with weakness in the hands may not have sufficient motor control to move a mouse in the right areas to open all submenus. Therefore, it’s always best to keep your submenus as simple as you can.

With your menu structure planned, you can start to implement a menu that’s accessible for all. To do this, you may need a developer's help, as accessible drop-down menus need to be coded correctly to meet the needs of different user groups.

Fortunately, the W3C Web Accessibility Initiative (WAI) has shared standards and best practices for drop-downs. Here’s what they recommend:

Accessible Drop-Down Menus for Mouse Users

Visitors that can use a mouse but don't have fine motor control require drop-down menus to remain visible for long enough to use. If a drop-down menu appears on mouse hover but the user doesn't have a steady hand, the menu will disappear too quickly when they accidentally disengage with it. This is an inaccessible menu.

The solution is to implement a time delay from when the mouse leaves the menu area to when the menu closes. In the example below, a time delay of a second has been applied to the drop-down menu when the mouse moves away. This way, the user can right their cursor in time.

Image Source

Here’s the code to produce this type of menu:

Source

Accessible Drop-Down Menus for Keyboard Users

Users who are reliant on a keyboard must be ableto navigate your drop-down menus via the tabkey and the enterkey. If they can't see the drop-downs when navigating a page, they won't know what links exist and where they lead.

According to the WAI, "Submenus should not open when using the tabkey to navigate through the menu, as keyboard users would then have to step through all submenu items to get to the next top-level item." It also recommends two approaches to get around this:

Using the Parent Menu Item as Toggle

In this example, the “Space Bears” link has submenu items. This link doesn't go to a location in itself —it acts as a trigger to open the drop-down menu.

Image Source

The user can press tabfive times to cycle through the menu in sequence up to the final menu item, “Contact”. As they press tab, the keyboard user can easily see which link they have selected because the white foreground and navy background colors of the navigation are inverted, and the link is also underlined.

Image Source

If a user presses enteron a parent menu item with a submenu, the drop-down menu becomes visible.

Image Source

Pressing tabagain highlights the first link in the drop-down menu.

Image Source

A user can then press enterto visit the highlighted link, or tabto move to the next link in the drop-down menu.

Here’s the JavaScript to enable this functionality:

Source

One disadvantage with this method is that it might not be obvious to a sighted keyboard user that a drop-down menu is present. Someone could use the tabkey to go all the way to Contact without discovering the Space Bears drop-down menu.

Using the Button as Toggle

In this example, the top-level menu item of “Space Bears” is linked to another page, so it can't toggle the drop-down menu. Instead, the arrow icon to the right of the link signals that a drop-down menu is present. The button also has some hidden text for screen reader users to tell those people that the button toggles a drop-down menu.

Image Source

When the toggle button is selected with the keyboard, it takes on a white highlight.

Image Source

When a visitor triggers the button by pressing enter, the drop-down menu opens.

Image Source

The drop-down menu behaves as in the previous example — pressing tabselects the first link.

Image Source

This implementation requires a bit more code, which W3C provides:

Source

Accessible Drop-Down Menus for Blind Users

Finally, blind users who use a screen reader need the menu coded as an unordered list of links so that they can tell how many links are in the main navigation or each drop-down menu. They also need to know which link is the current page they're on.

Now, let's take a look at another type of accessible drop-down menu that combines some of the features we've seen in the previous examples.

Superfish Plugin for Creating Accessible Drop-Down Menus

Superfish is a widely used JavaScript plugin that supports accessible drop-down menus. It works on touch devices as well as desktop and laptop computers. Superfish is available for developers to download and use in web development projects. The plugin is also incorporated into some themes and templates for popular content management systems.

For users who have difficulty controlling a mouse, Superfish adds a delay when the mouse moves off the drop-down menu before it closes. This delay is set to 0.8 seconds by default and can be increased if required.

Superfish also offers full support for keyboard users — arrows show the user where there are submenus.

Superfish navigation can be horizontal, vertical, or nav-bar. You can also build multi-level drop-down menus using Superfish, or use it to create mega menus. Here's an example of a Superfish navigation bar menu:

Image Source

No matter which type of Superfish menu you choose, your users interact with it in the same way, by using the tabkey to navigate through the menu items. Pressing tabautomatically opens up any drop-down menu on the page.

The main downside of Superfish's navigation is that a user has to tabthrough all the menu items in a drop-down menu before moving to the next top-level item. If your drop-down menus have many links, that's a lot of keystrokes. So, it's important to plan your main navigation well and trim the unnecessary links.

Accessible Fly-Out Menus

Depending on who you talk to, the term "drop-down menu" can mean different things. In this article, we’ve considered drop-down menus to be any type of website navigation with multiple levels that descend vertically. However, there’s another type of drop-down menu that you’ve probably seen, fly-outmenus.

Like a regular drop-down menu, a fly-out menu is a hidden submenu that is revealed on interaction with the navigation. Unlike regular drop-downs, however, the hidden content "flies-out" horizontally.

A fly-out menu can have multiple levels to it, and is often better at implying page hierarchies in this way. Here's an example of a two-level fly-out menu:

Image Source

Despite the difference in presentation, our accessibility principles for drop-downs also apply to fly-out menus: The structure of links should be clear and intuitive, options should be navigable by the mouse as well as the keyboard, and the menu should be coded in such a way that is legiblefor screen readers. Also, consider setting a time delay before submenu items disappear.

Note that drop-down menus and fly-out menus can also be combined. In the example below, the “Depth” element has a drop-down menu showing “Level 01”. “Level 01” contains a fly-out menu for “Level 02”, which in turn reveals “Level 03” as a fly-out.

Image Source

Making Menus Accessible

As we’ve seen, to make accessible drop-down menus you need to keep in mind the needs of different disabled user groups.

Making your menus simple and logical, allowing extra time for them to respond to mouse movements, using the correct code for screen reader users, and ensuring your menus can be operated with the keyboard all play their part.

By using accessible drop-down menus, your website will be easier to navigate, and no one will be excluded.