Navigation is a core function of a website. To ensure people with disabilities have equal access to our web content we need to make sure the menu works for people who can't use a mouse, such as, people with motor function impairment, keyboard-only users, and screen reader users.

It is also a WCAG 2.0 AA compliance issue requiring us to meet the 2.1 – Keyboard Accessible success criteria.

Is my menu compliant?

Your menu might already be compliant. The easiest thing to test is keyboard accessibility. It is the lowest bar. If it does not work as a keyboard only user it probably is not accessible for screen reader users either.

Keyboard accessibility testing:

To check for keyboard accessibility you only need to use your 'Tab', 'Spacebar', and 'Enter' keys.  If all four of the following criteria are met, your WordPress Theme's menu is probably accessible.

  1. Hitting the 'Tab' key should make a focus indicator on the menu item.
  2. Continue hitting the 'Tab' key through the whole menu, the focus indicator should advance and should never disappear.
  3. When a menu item has focus hitting the 'Enter' or 'Spacebar' key does the same thing as a mouse click (such as going to a new page or expanding the menu). 
  4. Hitting the 'Tab' key should allow the user to see and activate the same menu items as a mouse user, including dropdowns.

If all four of those items worked, it might be ok. If it didn't pass that test, the dropdown is probably not accessible. Check if any the site follows any of these alternative accessibile drop down menu example design patterns(link is external). 

If you are still not sure (and you are a Duke employee and your question is about a Duke affiliated website) email web-accessibility@ duke.edu(link sends e-mail) and ask us.

 

What if my drop down menu didn't work as mentioned above?

Option one: It probably needs some extra code to make it accessible. Fear not! We have a WordPress module for that called "Duke Superfish Accessible Menu". See the next heading for instructions on how to enable the fix.

Option two: Remove the drop down menu items.

Introducing the Superfish Accessible Menu Plugin:

Why do I need this Plugin?

It will help ensure everyone has equal access to your web content. The module helps people with a wide range of abilities, such as screen reader users, keyboard-only users, and touch screen users.  It also mitigates other risks that go along with people finding inaccessible websites.  

What is it going to do to my site?

For sighted users, it shouldn't change anything visually.  Check out this demo video to see what the Superfish Accessible Menu Plugin does for your site. For people who are unable to use a mouse, it will make it more accessible.

How to add the Superfish Accessible Menu:

Go to the admin part of your site.

Step 1. Click the Plugins link

Step 2. Search for "superfish menu"

Step 3. Click the "Activate" link.

Screenshot of activating the superfish wordpress plugin

Step 4. Log out of your site and and log back in to make sure it worked

Step 5. Test them menu by hitting the 'Tab' key through it. 

If it worked, it should automatically expand the submenu items as you hit the Tab key.

If it messed up the location of the dropdowns, it will need a couple lines of CSS.  Ask a web developer friend for 15 minutes of their time, or email web-accessibility@duke.edu to get some help, if you are a Duke employee and this is a Duke affiliated site.

Caveats and usability best practices:

  • Menus with dozens of menu items make people's brains work really hard. It is also known as cognitive load.  This is an issue for all people, not just people with disabilities. 
  • Don't make menus that are three levels deep. It takes a lot of dexterity even for mouse users to use menus that are three deep. the slightest inaccurate mouse movement can make the menu hide on people.
  • Don't use this Superfish menu design patten on menus with a ton of links.  A screen reader might have to listen to the entire menu.  The cognitive load for people to track that many items in their minds is unreasonable to the point of being inaccessible.  How many is 'a ton of links'?  Aim for less than 25 or less.  For screen reader users, consider each word in the menu as roughly equivalent to a second.  If it takes longer than about a minute to get through the menu then it is too long.
  • There are a few of valid ways to make an accessible menu. This is just one method that works for keyboard-only users and that screen reader users have told us it works for them for reasonably sized menus.