With advancements in front end technologies, we have come to a time when dropdown menus are an integral part of the navigation of modern sites. Gone are the days when you would toil hard to keep your page’s size below 100 kb, as jQuery is perhaps the bare minimum that developers start with. In this post, we will look at the different ways of creating dropdown menus, with web accessibility in mind.
Web Accessibility is the process of enabling the users of all abilities and disabilities to access features of your website equally. This includes making your website compliant to certain guidelines set by the W3C. In case of dropdown menus, which serve as an important part of navigation, we need to make sure that they are accessible to keyboard only users and readable by screen readers.
The keyboard accessibility is taken care of by using proper HTML markup (like ul and li for the menu elements). The compliance with screen readers is either done by specifying ARIA roles as per W3 specifications, and with the use of proper HTML markup. Keeping these two in mind, we can build dropdown menus which can be accomplished with only CSS modifications or by adding some JavaScript tweaks over the CSS styling. As a developer, it is always advisable to go for the CSS-only alternative as it avoids adding JavaScript dependencies.
SuckerFish:
This dropdown was developed keeping in mind that dropdowns usually required heavy JavaScript to work. What was worse is that there had to browser specific hacks within the JavaScript to make sure it worked in all browsers. In that situation, it was very difficult to handle minor changes.
A demo of the SuckerFish is available in this link, whereas the implementation is explained in this post by Dan Webb, the creator of SuckerFish.
It’s a lightweight plugin, but unfortunately, doesn’t support keyboard-only navigation, making it difficult for people who can’t control the mouse.
Son of SuckerFish:
This came out as an improvement over SuckerFish. This has better compatibility for Screen Readers and uses better designing practices (like using CSS margins to hide menus over the display property).
Although it makes screen readers read the content out, keyboard accessibility is worse- the keyboard focus vanishes on going though the sub menu items, and that might confuse users.
You can find a demo here and the steps to implement it by Dan Webb and Patrick Griffiths.
Dropper Dropdown Menu:
This is a pure CSS dropdown menu with full support for keyboard-only users as well as screen readers. It doesn’t define or use any ARIA roles, but still manages to be read by screen readers because of its proper markup. Although it’s fully keyboard accessible, it can be traversed with only Tabs and arrow keys are of no use.
The CSS implementation of this menu is a very tricky one. It uses floats and margins to hide the submenu items and then make them reappear later. The CSS is very difficult to understand, which makes it difficult to customize.
This dropdown menu has been described as the world’s most accessible dropdown menu. You can find a detailed post on how to implement it in Timo’s blog, where he tries to explain the ideas behind making this dropdown menu possible using only CSS. You can have a look at the demo here.
Ultimate Dropdown Menu:
This is a fully accessible dropdown menu, with a relatively easy to understand mechanism. It adds support for the arrow keys during keyboard navigation, but that has it’s disadvantage for people using the screen reader as it might get confusing.
CSS customization is a bit difficult because of the inline styles injected during initialization through JavaScript.
You can have a look at the documentation here or a live demo to get a feel of the dropdown menu.
Simply Accessible Dropdown Menu:
This dropdown menu is highly accessible, thanks to the ARIA roles that are defined for screen readers. It uses clean HTML, which makes it easy to setup and customize if necessary. The ARIA markup here is added through JavaScript.
You can have a look at the article that inspired this dropdown menu if you want some more information on this or a live demo.
We hope that this post helped you get some insight on dropdown menus and how the issue of accessibility can be tackled. If you decided to use one of them, do mention it in the comments.
