Depending on who you speak to, the term 'drop down menu' can mean different things. In this article we'll consider drop down menus as a type of website navigation with multiple levels.

Drop down menus are hidden initially, and are revealed when the user interacts with the main navigation, or parent menu. Typically the hidden menu items are shown on hover, when a user moves the mouse over a parent item.

Using web accessible drop down menus is important because, by doing so, you'll allow disabled people to browse your site with ease. Accessible drop down menus assist people with visual, motor, and cognitive disabilities.

If your drop down menus are not accessible, these users may miss out on key sections of your website, or it may take them much longer to find the information they want. As a result, it will hurt their user experience and they may not make a return visit.

Download Now: Free Website Accessibility Checklist

Understanding How People with Disabilities Might Use Your Drop Down Menu

It's important to understand how site visitors with disabilities might use your navigation so you know how to fix those accessibility issues.

Someone living with multiple sclerosis, for example, may have muscle spasms, tremors, or muscle weakness. These symptoms make holding and using a mouse difficult. So, your drop down menu should be usable by a keyboard. This means that when the user presses an appropriate key the drop down menu becomes visible, as it would be for someone using a mouse.

If you hover over a link in a menu with a mouse, you would normally see a change in background color or border color. Someone who uses a keyboard needs the same visual signal so they know which link they have selected. We call this the focus style. A keyboard user can't use a mouse pointer to tell where they are on the page, so having a clear focus style is crucial.

Users with cognitive disabilities may not realize that some menu items are hidden. This may be a problem on a mobile device, where navigation is often toggled by a hamburger icon.

Mega menus, like the one shown below, can also have a large number of links shown in a drop down menu, so it's important that your menus are organized in an intuitive way. Mega menus are a type of drop down menu which show the submenu links in a large box, as in the example shown below. Mega menus may have images or video as part of the menu, and often have links headed by topic. However, a badly organized mega menu can be less usable overall if it fails to guide users to their destination. This is especially true for someone with a cognitive disability.

HubSpot blog Resources mega menu with nine headed sections and links.

Image Source

Before we get into how to create an accessible menu, it's important to know the two types of navigation menus that exist — drop down menus and fly out menus. Understanding these types will help you create a navigation that best suits your audience.

When the menu appears, the links 'drop down' vertically below the parent item. A drop down menu will remain visible until the user moves the mouse away or visits a link. Drop down menus are often used when screen real estate is limited, so that visitors can access relevant content without having to visit other pages first to find it.

In the example below, there is a drop down menu for Documentation showing the different types of documentation.

Navigation menu with a drop down menu for Documentation with seven submenu items.

Image Source

Here's an example of a two-level fly out menu:

A vertical navigation menu with two levels of fly out menu, one for products and one for sub products.

Image Source

Drop down menus and fly out menus can be combined. In the following example, the link Depth has a drop down menu showing Level 01. Level 01 has a fly out menu for Level 02, and in turn Level 02's fly out menu shows Level 03.

A drop down menu combined with a fly out menu.

Image Source

Now that you know what a drop down menu and fly out menu are, let's take a look at building accessible drop down menus.

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 show on the main navigation, then determine which of those need child pages.

Below is an example of the basic structure for a navigation with drop down menus. In the example, the Services page has four child pages — Blog writing, Social media, SEO, and Web design. The Blog page has three child pages — Marketing, Social, and Analytics. So, there will be two submenus that would drop down for Services and Blog.

A navigation tree view with submenus for Services and Blog.

Child pages can also have their own child pages. 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.

A navigation tree view with two submenu levels for Blog.

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.

Too many levels of a drop down menu or fly out menu can make your navigation too difficult to use for some people. 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 the submenus. Therefore, keep your submenus as simple as possible.

To make your drop down menus accessible, you will probably need a developer's help. Accessible drop down menus need to be coded correctly to meet the needs of different user groups.

Blind users who use a screen reader need the menu coded as a 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.

Sighted users who are reliant on a keyboard need to be able to navigate accessible drop down menus via the tab key and the enter key. If they can't see drop down menus when navigating the page, they won't know what links are there and where they lead.

Visitors that can use a mouse but don't have fine motor control require drop down menus to be visible for long enough to be able to use them. If a drop down menu appears on mouse hover but the person doesn't have a steady hand, it may disappear quickly and not be accessible.

The following three accessible drop down menu examples are taken from the Web Accessibility Initiative's tutorial on fly-out menus.

Accessible Drop Down Menus for Mouse Users

Someone with hand tremors may be able to use a standard mouse but find it hard to control. They might not be very accurate at pointing and clicking. A drop down menu which disappears too fast, before they have had a chance to interact with it, is inaccessible.

A drop down menu with a time delay of a second after the mouse moves away before it disappears.

In the above example, a time delay of a second has been added to the drop down menu when the mouse moves away. This means that if the mouse moves away accidentally, the drop down menu doesn't vanish immediately.

Accessible Drop Down Menus for Keyboard Users

There are multiple approaches to creating keyboard accessible drop down menus.

According to the WAI,"Submenus should not open when using the tab key 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."

Using the Parent Menu Item as Toggle

In the following example, pulled from WAI guidelines, 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.

Navigation bar with five links - Home, Shop, Space Bears, Mars Cars and Contact.

Image Source

The user can press tab five times to go through the menu in sequence up to the final menu item, Contact.

A 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.

When the focus is on Space Bears, the drop down menu is not yet visible.

Image Source

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

The Space Bears drop down menu with 2 links is visible.

Image Source

Pressing tab again highlights the first link in the drop down menu.

Space Bear 6 is selected with the keyboard.

Image Source

A user can then press enter to visit the highlighted link, or tab to go to the next link in the drop down menu.

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 tab key to go all the way to Contact without discovering the Space Bears drop down menu.

Using the Button as Toggle

In this example from WAI, 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 button 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.

Navigation bar with five links - Home, Shop, Space Bears, Mars Cars and Contact. There is a down arrow button after Space Bears..

Image Source

When the toggle button is selected with the keyboard, it has a white highlight and the arrow colors are inverted.

When the button gets focus, it is highlighted.

Image Source

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

When enter is pressed, the drop down menu becomes visible.

Image Source

The drop down menu behaves as in the previous example. Pressing tab selects the first link, Space Bear 6.

When tab is pressed, the focus moves to the Space Bear 6 link.

Image Source

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 plugin which 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 has a delay when the mouse moves away from the drop down menu before it closes. This delay is set to 0.8 seconds and can be increased if required.

Superfish 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:

Superfish nav-bar with four submenu items aligned horizontally.

Image Source

No matter which type of Superfish menu you choose, your users interact with it in the same way, by using the tab key to navigate through the menu items. Pressing tab automatically opens up any drop down menu present.

The main downside of Superfish's navigation is that a user has to tab through 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 not include unnecessary links.

Summing Up

As you'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 use, and no one will be excluded.

New Call-to-action

 website accessibility

Originally published Mar 30, 2020 7:51:39 PM, updated April 16 2020


Web Accessibility