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.
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.
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.
Simply Accessible Dropdown Menu:
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.