WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible menus

for

Number of posts in this thread: 13 (In chronological order)

From: Benjer
Date: Wed, Apr 23 2003 9:13AM
Subject: Accessible menus
No previous message | Next message →

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:

Menu1
Menu2
Menu3

subMenu1.1
subMenu1.2
subMenu1.3

subMenu2.1
subMenu2.2

You get the idea I hope. Now the submenus are in <div> tags. I can place the
div next to the asscoiated Menu on the page - but how do I make it clear
that it is a submenu? Or is this just impossible with these kind of menu
systems?

Regards
Benjer



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


From: Jon Gunderson
Date: Wed, Apr 23 2003 9:26AM
Subject: Re: Accessible menus
← Previous message | Next message →

In general there is not a good way to create accessible hierarchical menus
in web pages. The major problems are:

1. When author colors or fonts are overridden the menus become unreadable
from background content and the menu text overlapping each other.

2. Usually do not support keyboard access to the menus

3. Screen readers cannot use them

4. Pull down menus are also considered less usable by the general
population, since users do not expect them and it takes users more time and
effort to review and select items from the menus than it does from a series
of web resources with static links.

Jon


At 05:05 PM 4/23/2003 +0100, you 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:
>
>Menu1
>Menu2
>Menu3
>
>subMenu1.1
>subMenu1.2
>subMenu1.3
>
>subMenu2.1
>subMenu2.2
>
>You get the idea I hope. Now the submenus are in <div> tags. I can place the
>div next to the asscoiated Menu on the page - but how do I make it clear
>that it is a submenu? Or is this just impossible with these kind of menu
>systems?
>
>Regards
>Benjer
>
>
>
>----
>To subscribe, unsubscribe, or view list archives,
>visit http://www.webaim.org/discussion/

Jon Gunderson, Ph.D., ATP
Coordinator of Assistive Communication and Information Technology
Division of Rehabilitation - Education Services
MC-574
College of Applied Life Studies
University of Illinois at Urbana/Champaign
1207 S. Oak Street, Champaign, IL 61820

Voice: (217) 244-5870
Fax: (217) 333-0248

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: http://www.staff.uiuc.edu/~jongund



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


From: Carol Foster
Date: Wed, Apr 23 2003 9:31AM
Subject: Re: Accessible menus
← Previous message | Next message →

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 ADDRESS REMOVED =
http://www.umass-its.net/ipg
--



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


From: Sandy S. Andrews
Date: Wed, Apr 23 2003 10:47AM
Subject: Blackboard accessibility
← Previous message | Next message →

Hi

Is anyone else using Blackboard 6.0? They have not responded to my questions
about accessibility and there are a couple of things I'd love some specifics
on, namely the chat and the assessment interface.

The chat is a new version and is supposed to be accessible, but I haven't been
able to get a screen reader to read it, although I can input text. Hopefully I
just don't have the info on this.

thanks

Sandy Andrews



_____________

Sandra Sutton Andrews, M.A., M.Ed.
= EMAIL ADDRESS REMOVED =
Instructional Spec. Sr.
Information Technology, Instruction Support
Arizona State University, Tempe AZ

The Law, in its majestic equality, forbids the rich, as well as the
poor, to sleep under the bridges, to beg in the streets, and to steal
bread. - Anatole France


On Wed, 23 Apr 2003, 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 ADDRESS REMOVED =
> http://www.umass-its.net/ipg
> --
>
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>
>


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


From: Anitra Pavka
Date: Wed, Apr 23 2003 11:54AM
Subject: Re: Accessible menus
← Previous message | Next message →

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 ADDRESS REMOVED =
> http://www.umass-its.net/ipg


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


From: Holly Marie
Date: Wed, Apr 23 2003 12:18PM
Subject: Re: Accessible menus
← Previous message | Next message →


----- Original Message -----
From: "Carol Foster" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, April 23, 2003 11:35 AM
Subject: Re: Accessible menus


> 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.
>

This is what I would have suggested also.

There is one other suggestion, though DHTML is used, that are suppose to
be standards, guidelines, accessible, and also work without the
css/dhtml support in older browsers...
gazingus.org Using Lists for DHTML Menus
http://www.gazingus.org/dhtml/?id=109

Until we get use of the specialized menu linking that is proposed inside
XHTML 2, and enough support, I think that the nested list is the way to
go.

I like the idea of giving an alt to sublists via visual elements if
possible. Interesting idea.

holly


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


From: Holly Marie
Date: Wed, Apr 23 2003 12:20PM
Subject: Re: Accessible menus
← Previous message | Next message →


----- Original Message -----
From: "Anitra Pavka"


> 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.

Nice one Anitra.
I suspect we should put together a Navigation / list items piece ...
[wrong list, :) ]
I am collecting the various links and think maybe we could come up with
some likable, usable results for whatever possibility. It would make a
great piece of information.

holly


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


From: Holly Marie
Date: Wed, Apr 23 2003 12:52PM
Subject: Re: Blackboard accessibility
← Previous message | Next message →

From: "Sandy S. Andrews"

> Hi
>
> Is anyone else using Blackboard 6.0? They have not responded to my
questions
> about accessibility and there are a couple of things I'd love some
specifics
> on, namely the chat and the assessment interface.

> The chat is a new version and is supposed to be accessible, but I
haven't been
> able to get a screen reader to read it, although I can input text.
Hopefully I
> just don't have the info on this.

I recall during a weeks long online accessibility learn event, one of
the presentations involved the blackboard web site. I do know they were
working closely with the people at webaim? and maybe a few others, and
should have a section up at their website regarding accessibility items.
I have not used the chat interface for a long while at blackboard.com,
but was very familiar with their set up previous to these changes. They
may or may not use a java based client, still, that may be tied to IE?
http://access.blackboard.com
Did you try this email address: = EMAIL ADDRESS REMOVED =

For others interested in online learning and Accessibility, there are
some other resources that may be worth a look.

Information on WEB based learning technologies found at this web link
http://www.washington.edu/accessit/articles?173

It looks like they evaluate different distance learning coursewares at
this page(printable version available) ... covers Blackboard, WebCT, and
ToolBook...

Snow (Special Needs Opportunity Window) - the people responsible for
APrompt and other items, has a Courseware Accessibility page, here:
http://snow.utoronto.ca/access/courseware/
(several resources for information available)

There is more about various tools or applications at their Network for
Inclussive Distance Education page: http://nide.snow.utoronto.ca/ -
which includes a page about Synchronious Communications Tools,
http://nide.snow.utoronto.ca/SyncComm/Synchronousindex.htm .


While working on several projects with a Professor who teaches e
Commerce, Business, and Marketing at a Midwestern United States
University, I was able to participate in team web design discussions
using a blind chat room [this had voice options and messaging which was
also available in visual mode too] and that was an interesting and great
experience. The professor works on the Internet and teaches, though he
is also blind. There are several on the WWW now.

holly



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


From: Holly Marie
Date: Wed, Apr 23 2003 1:20PM
Subject: Re: Accessible menus [another option]
← Previous message | Next message →

From: "Benjer"

> I'm not sure how to go about making a hierachial menu accessible ie:
>
> Menu1
> Menu2
> Menu3
>
> subMenu1.1
> subMenu1.2
> subMenu1.3
>
> subMenu2.1
> subMenu2.2

One other option that may not have been mentioned, and came to me while
I was thinking about this...
A combination of using Headers and Lists...
I do this on a few of my journal pages. I have the categories(though my
headers are not links, but there is no reason why linking headers could
not be used?]

Example
<header level tag>Menu 1 [which is also a main navigational
link]</header level tag>
<li>for Menu 1, sub link item 1</li>
<li>for Menu 1, sub link item 2</li>
<li>for Menu 1, sub link item 3</li>

<header level tag>Menu 2 [which is also a main navigational
link]</header level tag>
<li>for Menu 2, sub link item 1</li>
<li>for Menu 2, sub link item 2</li>

etc ...

Now,
[*] Those Headers could be links.
[*] Those Headers or top level navigation items are *scannable* via
devices that allow users to skip or scan a web document header by
header, so this offers an added level of usability for the device users.
[*]These Headers are organized in heirarchy that fits the content and
delivery.

So, semantically this works very well. Each header would be the main
navigation, each list under each header the *sub* area site links for
those categories or main pages.

holly


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


From: Sandy S. Andrews
Date: Wed, Apr 23 2003 4:24PM
Subject: Re: Blackboard accessibility
← Previous message | Next message →

Thanks, Holly, but so far the accessiblity info on the Blackboard site has to
do with Bb5.5, rather than Bb 6.0. There are some reviews out there, but it
is the specifics I am looking for!

The chat in 6.0 is a new one, said to be accessible. I'd love to tell
professors how to use it with JAWS. I don't want to tell them that it is
accessible if I haven't used it with JAWS myself.

Sandy

On Wed, 23 Apr 2003, Holly Marie wrote:

> From: "Sandy S. Andrews"
>
> > Hi
> >
> > Is anyone else using Blackboard 6.0? They have not responded to my
> questions
> > about accessibility and there are a couple of things I'd love some
> specifics
> > on, namely the chat and the assessment interface.
>
> > The chat is a new version and is supposed to be accessible, but I
> haven't been
> > able to get a screen reader to read it, although I can input text.
> Hopefully I
> > just don't have the info on this.
>
> I recall during a weeks long online accessibility learn event, one of
> the presentations involved the blackboard web site. I do know they were
> working closely with the people at webaim? and maybe a few others, and
> should have a section up at their website regarding accessibility items.
> I have not used the chat interface for a long while at blackboard.com,
> but was very familiar with their set up previous to these changes. They
> may or may not use a java based client, still, that may be tied to IE?
> http://access.blackboard.com
> Did you try this email address: = EMAIL ADDRESS REMOVED =
>
> For others interested in online learning and Accessibility, there are
> some other resources that may be worth a look.
>
> Information on WEB based learning technologies found at this web link
> http://www.washington.edu/accessit/articles?173
>
> It looks like they evaluate different distance learning coursewares at
> this page(printable version available) ... covers Blackboard, WebCT, and
> ToolBook...
>
> Snow (Special Needs Opportunity Window) - the people responsible for
> APrompt and other items, has a Courseware Accessibility page, here:
> http://snow.utoronto.ca/access/courseware/
> (several resources for information available)
>
> There is more about various tools or applications at their Network for
> Inclussive Distance Education page: http://nide.snow.utoronto.ca/ -
> which includes a page about Synchronious Communications Tools,
> http://nide.snow.utoronto.ca/SyncComm/Synchronousindex.htm .
>
>
> While working on several projects with a Professor who teaches e
> Commerce, Business, and Marketing at a Midwestern United States
> University, I was able to participate in team web design discussions
> using a blind chat room [this had voice options and messaging which was
> also available in visual mode too] and that was an interesting and great
> experience. The professor works on the Internet and teaches, though he
> is also blind. There are several on the WWW now.
>
> holly
>
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>
>


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


From: Joel Ward
Date: Wed, Apr 23 2003 5:18PM
Subject: Re: Accessible menus [another option]
← Previous message | Next message →

> Example
> <header level tag>Menu 1 [which is also a main navigational
> link]</header level tag>
> <li>for Menu 1, sub link item 1</li>
> <li>for Menu 1, sub link item 2</li>
> <li>for Menu 1, sub link item 3</li>

Do you need to include the <ul> or <ol> around the list, to make it valid
HTML? E.g.

<header level tag>Menu 1 [which is also a main navigational
link]</header level tag>
<ul>
<li>for Menu 1, sub link item 1</li>
<li>for Menu 1, sub link item 2</li>
<li>for Menu 1, sub link item 3</li>
</ul>



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


From: Holly Marie
Date: Wed, Apr 23 2003 7:33PM
Subject: Re: Accessible menus [another option]
← Previous message | Next message →


----- Original Message -----
From: "Joel Ward" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, April 23, 2003 7:13 PM
Subject: Re: Accessible menus [another option]


> > Example
> > <header level tag>Menu 1 [which is also a main navigational
> > link]</header level tag>
> > <li>for Menu 1, sub link item 1</li>
> > <li>for Menu 1, sub link item 2</li>
> > <li>for Menu 1, sub link item 3</li>
>
> Do you need to include the <ul> or <ol> around the list, to make it
valid
> HTML? E.g.

yes, Seems I left that set out, I was just giving an idea, and probably
should have included the ol, or ul, and in this case, probably ul.

holly



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


From: Benjer
Date: Thu, Apr 24 2003 1:57AM
Subject: Re: Accessible menus [another option]
← Previous message | No next message

On 23/4/03 9:13 pm, "Holly Marie" < = EMAIL ADDRESS REMOVED = > wrote:

> Example
> <header level tag>Menu 1 [which is also a main navigational
> link]</header level tag>
> <li>for Menu 1, sub link item 1</li>
> <li>for Menu 1, sub link item 2</li>
> <li>for Menu 1, sub link item 3</li>
>
> <header level tag>Menu 2 [which is also a main navigational
> link]</header level tag>
> <li>for Menu 2, sub link item 1</li>
> <li>for Menu 2, sub link item 2</li>

Thanks for everyones input, I did have problems whilst creating the menu
because the client wanted it to look as close as possible in NN4.7.

For this reason I was unable to use css -
I spent ages trying to get this
(http://www.alistapart.com/stories/taminglists/index.html)
To work in NN.

So I had to resort to using images and alt text. So from the responses it
would seem that in my alt text I could use:

MENU 1 HEADING
MENU 1 SUBHEADING 1
MENU 1 SUBHEADING 2
MENU 2 HEADING etc....

Would this be understandable for people using Text based browsers?

Benjer

PS I think using Lists are definitely the way forward for less demanding
clients.



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