Use Superfish to Create A.D.A. Compliant Drop Down Menus in WordPress

Be aware that this tutorial requires WordPress 3.6 or above to work correctly. If you are using an older version of WordPress, you will run into issues because of the older version of hoverIntent. Please follow these instructions to ensure Superfish works correctly with WordPress 3.5.2 and below.

Typically, only the parent links of a drop down menu are selected when a user “tabs through” a horizontal navigation. However, in order to maintain 508 compliance a user must be able to tab through the drop down menus as well.

I have found the fastest and easiest way to ensure that my drop down menus are A.D.A. compliant is by using the jQuery plugin Superfish. Superfish not only allows you to tab through your drop downs, but is fantastic with touch screens, utilizes hoverIntent for a better mousing experience and automatically generates CSS arrows to show your users that there are drop down links.

It’s also compatible with older versions of Internet Explorer.

Step 1 – Include the jQuery Libraries

Superfish requires three includes to work properly: jQuery, hoverIntent, and Superfish. jQuery and hoverIntent are already packaged in WordPress so we do not need to download these libraries. You will need to download Superfish. Once you have downloaded Superfish, copy the superfish.min.js file to your WordPress theme folder.

Now that superfish.min.js is in your theme folder we can begin to set up our include. Add the code snippet below to your functions.php file. Please note that your include might look different based on the location of the superfish.min.js file:

Now, all the jQuery libraries are included to support Superfish, but we still need to fire the script.  Create a new .js file in your theme named superfish-init.js in the same folder as the superfish.min.js file. You will probably have to modify the snippet below to correctly target the container including your navigation. Copy and paste in the following code snippet to get started:

Be aware that are a ton of options for Superfish. The snippet above is very simple, but does the job. You can always add more options if your site requires them.

Now, let’s amend the superfish-init.js include to the superfish.min.js include. The final code snippet for your functions.php file should look something like this:

All the jQuery includes are ready to go!

Step 2 – Modify the CSS

The CSS must be modified for Superfish to work at it’s full potential. However, everyone’s drop down CSS code is going to be different. I’m including what I typically use to start styling my drop down menus:

Now, like I was saying, your CSS is different. However, please pay close attention to any lines that reference the .sfHover class. Notice that I added them in to any lines that contained the pseudo class :hover.

Chances are you are using :hover to trigger your drop downs, so this shouldn’t be too hard to mimic in your own CSS. The basic pattern is:

That’s it! You should now be able to tab through your drop down menu with the added benefit of having hoverIntent and automatically generated drop down arrows for a better user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *