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.
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.
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.
Drop Down Menu
A drop down menu is a list of related links which are associated with a parent item in a navigation menu. The navigation is normally organized in a horizontal bar, and often a down arrow is used in the menu to hint that there is a drop down menu. The drop down menu, or submenu, is invisible until a user interacts with the navigation bar via mouse or keyboard.
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.
A fly out menu is very similar to a drop down menu. A fly out menu is a hidden submenu which is revealed on interaction with the navigation. The difference is that instead of the submenu dropping down vertically, it will 'fly out' horizontally. Like a drop down menu, a fly out menu can have multiple levels.
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.
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.
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.
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 thatcan 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.
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.
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.
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:
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.
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.
Originally published Mar 30, 2020 7:51:39 PM, updated April 16 2020