This is a post based upon my findings on how to use javascript menus and in particular drop down menus in an accessible way. It is not meant to be a “how to” for developers nor is it definitive, it is more a comment on the accessibility argument and how to move the conversation forward.

The principle argument about drop downs fall into two camps, the designers  who are often for them because they are a good way of using space and making the layout “tidy”; and the usability types who are against them because they can be confusing, dysfunctional when there are tiered levels and hard to use for mobility impared users.

However the great usability guru himself (or luddite as others may prefer to call him…) Jakob Nielsen actually approves of drop down menus albeit in a specific format. In his article Mega Drop-Down Navigation Menus Work Well he supports large drop down boxes whilst still cautioning against regular javascript dropdowns.

Example 1 of a mega drop down navigation box

Mega drop downs have the following characteristics which make them better:

1. all secondary and subsequent navigation items are visible, there is no hovering and then trying to “catch” the tertiary level in the next pop up navigation box
2. it allows greater structure for the layout, better use of typography, space and even graphics
3. all navigation items are visible at once
4. they can be used as drop downs or activated from side bars as “mega fly-outs”

Example 2 of a mega drop down navigation box

Why mega drop downs are better than regular drop downs:

1. for bigger sites you need to scroll which hides the initial options
2. mega drop downs support easy and obvious grouping
3. you have a richer typography to help the user
4. you can use imagery such as icons or pictures to support your navigation

Points to bear in mind with mega drop downs:

1. speed is important, so ensure the interface elements display quickly
2. allow some latency (e.g. 0.5 seconds)  after moving from a nav item to allow the user to move to the sub nav without activating a neighbouring top level nav item if it passes over it on the way to a sub nav item.
3. keep it simple, just because you can put anything in a mega drop down doesn’t mean you should

Accessibility

Remember to code with screen readers and assistive technology in mind. There can be issues for people using mobile devices or people using screen magnifiers as the enlarged part of the menu may appear to be the only part of the menu. One way to help is to have strong visual signals for menu borders so people can follow them when they are enlarged.

And remember the standard rules of accessibility, don’t make clickable items too small, or too gimmicky.

Options for improving accessibility

See more from Jakob Nielsen to understand the finer details of mega drop down accessibility

Continue reading »