WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: mouseover/hover and keyboard accessible expandablemenu?

for

From: Jason Megginson
Date: Nov 6, 2009 1:45PM

Hi Chuck,

In regards to the arrow keys, there may be no difficulty with navigating
this way as long as the menu items are inline with the parent link.

The example at HTML Dog provides a good example of this (sidebar: I also
like the list structure to denote hierarchy):
http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

The child links are inline with the parent link in the source code in this
example. Screen readers like JAWS (virtual cursor) will read the content
in the order it appears in the source code.

When developers use CSS to display the sub-menu items, the content should
appear inline with the parent link(s). I have seen where developers place
the menu items at the end of the source code and position it visually in
the correct place. A user navigating with arrow keys will not be able to
identify the content because it is virtually at the end of the page.

I often recommend sighted testers to disable styles on the page (FireFox)
and inspect where the dynamic content appears. If the content appears
disjointed, that's how users in Virtual Cursor mode (JAWS) will access the
information.

Thanks
Jason