Accessible Menus with Superfish
Written by Samiullah Khan on 27 May 2016
Accessible menus are the those menus that are usable regardless of how visitor will interact with them. People who visiting our website are not just limited to mouse. The might be using a keyboard or even a text to speech browser to navigate.
Here is the link to the demo that will be used to identify the problem and later solve it.
Words might not be enough to illustrate the problem we face with the menus. I will be showing some examples to further illustrate my point.
Visit http://thefreelancenaturopath.com/ and skip to the navigation part and use you mouse to go through all of the menu item. As soon as you hover over the service menu item—the drop down reveals. But the menu drops out before you even try to select any drop down menu.
Do you want to solve this common menu problem. Before getting to it, let’s also discuss another somewhat related problem.
Let’s revisit an article where we animated a drop down menu using some cool CSS techniques. I will be working on top of that example especially with the one with submenu. Visit this demo, and try to access the menu items using the tab key on your keyboard, as it’s shown in the following gif.
We are facing two major issues
- Usability when menu drops before getting to it
- Accessibility when keyboards tab won’t trigger or display the sub menu.
SuperFish: A way to make Accessible menus
Superfish is a jQuery plugin which is built on top of Suckerfish which causes our menus to work flawlessly even in IE5. (an interesting read, when in IE5 css hover would only work for links and the only way to deal with it was to use mouse over events).
SuperFish will not only help make our usable menu but out of the box it comes with touch devices support. It also provides css to highlight current page and other great goodies.
Go ahead and download the zip file from the plugin homepage.
<script src="js/jquery.js"></script> <script src="js/superfish.js"></script>
The only files we need are in the js folder. Just provide the class for the top level menu and you are good to go. Click here to see the finished version of our example after adding Superfish. If you leave the sub menu, it will wait for 200ms before it hides that is what controlled by delay property in above snippet so our menus will never drop out anymore.
These problems can be found all around the web. Some times a CSS isn’t enough to create a semantic drop down menu. Navigation and links are critical components so it does make sense to put a lot of thought in planning and styling them.