facebook-squared twitter-squared rss-squared gplus-squared

Friday

27

May 2016

0

COMMENTS

Accessible Menus with Superfish

Written by on 27 May 2016

accessible menu made much user friendly with the use of superfish plugin

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.

accessible menus with superfish fish solves the menu drop out issue

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.

accessible menus & accessible menu with superfish jquery plugin

 

We are facing two major issues

  1. Usability when menu drops before getting to it
  2. 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.

Conclusion

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.

Leave a Reply

%d bloggers like this: