WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible menus

for

From: Anitra Pavka
Date: Apr 23, 2003 11:54AM


There's a way to use CSS to style nested lists to make them appear as a
hierarchical menu. I'm duly impressed by how many browsers handle this example
well. I'll add that it even looks and works passably in IE 5.0 (Win 2000).

http://www.surgery.ubc.ca/mockup/advocate/allcss.html

When JavaScript is disabled, the top level of links should be navigable if you
use regular links (not generated by JavaScript). I recommend you repeat the lists
of lower level links (the ones not viewable when JavaScript is disabled) on the
target page of each top level link. That way the navigation is fully usable whether
or not JavaScript is supported.
My only gripe is that since this example uses absolute sizing for everything,
the font isn't resizable in Internet Explorer (Windows). I plan on playing around
with this example to see if I can make it work using relative sizing.


- Anitra Pavka
Web Developer, www.accesskansas.org
Web Accessibility Advocate, www.anitrapavka.com


Carol Foster wrote:

> We have been looking at this too and would be interested in others'. The ideas
> that we have found that appeal most so far are:
>
> 1. Using nested lists.
> 2. Using icons before the menu items, either invisible or preferably not, with
> alt text such as "subtopic of products:" for the the subtopics.
>
> Carol
>
> Benjer wrote:
>
> > Firstly hello, as this is my first post to the list.
> >
> > I've recently been learing about building accessible websites. I now test
> > all websites that I build in lynx on OSX.
> >
> > I'm not sure how to go about making a hierachial menu accessible ie:
> >
>
> --
> Carol Foster, Web Developer
> Internet Publishing Group, Information Technology Services
> University of Massachusetts, President's Office
> phone: (413) 587-2130
> fax: (413) 587-2148
> mailto: <EMAIL REMOVED>
> http://www.umass-its.net/ipg


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/