PDA

View Full Version : Web Menus (DHTML) and Accessibility Guidelines



carld
02-21-2003, 08:35 PM
I am creating a site that is required to follow Web Content Accessibilty Guidelines (Bobby)
http://www.w3.org/WAI/

At the same time, I have a large number of categories I'd like to have accessed via a navigation bar on the top of the page, and with drop down menus (DHTML) to sub-categories.

After recieving the Accessibility Guidelines, I don't see how drop down menus can at all be used in compliance.

Any suggestions?
Thanks

jkd
02-21-2003, 08:59 PM
This is a problem with most DHTML effects. However, you can still have accessible menus. :)

The deal is, you use nested <ul>'s - so that browsers that may not understand it will still see a logical order of links. You can go for pure CSS from here, using :hover on the li's, which means something like Gecko/KHTML/Opera-only (IE will see the entire tree), or can use some Javascript in conjunction to make IE see the menu as well.

An example of that system in place:

http://devedge.netscape.com

An explanation for pure CSS menus:

http://www.meyerweb.com/eric/css/edge/menus/demo.html

And another implementation of hybrid CSS/DHTML menus using behaviors to make up for IE:

http://www.brothercake.com/scripts/navmeister/page.php

carld
02-21-2003, 09:35 PM
ah, nice.

Thank you very much.

carld
03-04-2003, 08:05 PM
How about using such menus with non-CSS browsers?

I wonder if I should use pure javascript menus, but perhaps I'll run into problems with accessibility guidelines.

Here is a dropdown menu scheme that I'm pretty sure plays well with CSS, non-CSS browsers and accessibility apps:
http://www.gazingus.org/dhtml/?id=109

Any opinions about that menu? I wish the menu could be first actived (displayed) with a mouse-over rather than a click (I see this is the case on Mozilla and IE). Also, in Netscape 4.5 the menu appears a <UL> list.

Thanks for your help.

brothercake
03-04-2003, 09:34 PM
That's exactly what you want - the links jkd posted are variations of the same core idea.

So browsers which don't have the CSS/javascript support to build the menus, get the plain unorderdered list; a heirarchical list of links is semantically equivalent to dropdown menus, and navigable to all user agents, right back to Lynx, and of course speaking browsers, and other non-visual user-agents. Bobby will smile at that :)

carld
03-04-2003, 09:46 PM
Great, thanks for your comment brothercake. I've been playing with Dave Lindquist's menu (grazingus.org) and it is pretty simple to customize.