WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: avoiding tabbing through drop downs

for

From: Jared Smith
Date: Mar 5, 2010 4:57PM

James-

It was great having you in town for the web accessibility training.
Thanks for your compliments.

In general, the approach we recommended was 'hiding' the drop-down
menus directly from keyboard (and thus screen reader) users. The
sub-navigation links would be hidden with CSS so as to not be
navigated to or read by a screen reader (e.g., display:none in CSS or
not part of the page at all until generated on-demand by scripting).
The main navigation item would trigger the display of the sub-menu
items with onmouseover only. Because this event is not triggered by
the keyboard, the menu would not appear unless you're using a mouse.
The main menu item would also be a standard, accessible link to a
secondary page that provides the sub-navigation links in standard
HTML, plus optimally some additional content that is relevant (it
doesn't have to be just a plain list of links).

This approach ensures keyboard accessibility and allows full
functionality without requiring javascript. It also allows all menu
items to be indexed and read by search engines.

The link Al posted models this very well, though I find it a bit odd
that the main menu item and the first sub-navigation item go to the
same page, but that's not really relevant to this discussion.

Jared Smith
WebAIM