E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: accessibility of this drop down menu

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

From: Angela French
Date: Tue, May 04 2010 7:03PM
Subject: accessibility of this drop down menu
No previous message | Next message →

Can anyone please tell me if this type of menu is accessible to screen readers and non-mouse users?
http://www.sitepoint.com/examples/megadropdowns/completed.html#

When I tab through the navigation links, I can't get to the submenus.

I am building a similar menu and concerns about it being usable for everyone (even those with Javascript turned off).

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;

From: deblist
Date: Tue, May 04 2010 7:06PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Angela French wrote:

> Can anyone please tell me if this type of menu is accessible to screen readers and non-mouse users?

I can't get to the drop downs in this version without a mouse,
with or without JavaScript, unless I toggle off CSS. Some drop
downs are keyboard accessible, but this one isn't.

-deborah

From: Geof Collis
Date: Tue, May 04 2010 7:09PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Hi Angela

That's a drop down menu? Not to my screen reader, just a list of links.

cheers

Geof

At 08:03 PM 5/4/2010, you wrote:
>Can anyone please tell me if this type of menu is accessible to
>screen readers and non-mouse users?
>http://www.sitepoint.com/examples/megadropdowns/completed.html#
>
>
>When I tab through the navigation links, I can't get to the submenus.
>
>I am building a similar menu and concerns about it being usable for
>everyone (even those with Javascript turned off).
>
>Thank you,
>
>Angela French
>Internet Specialist
>State Board for Community and Technical Colleges
>360-704-4316
>http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Blaine Clark
Date: Tue, May 04 2010 11:39PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
<tt>Here are the results from the Linux text browser ELinks; 
 
[Links are bold;] 
 
MEGA Shop: We sell stuff! 
Mega Shop 
 
Skip navigation 
 
* Home 
Latest news, special deals, and more... 
* Stuff for him 
 
Menswear 
 
Shirts, T-shirts, Accessories, More... 
 
Gifts 
 
Sporting goods, Gadgets, More... 
 
Clearance! 
 
40% off all photo accessories this weekend only. Don't miss out! 
 
More stuff for him... 
* Stuff for her 
 
Ladieswear 
 
Tops, Pants, Skirts, T-shirts, More... 
 
Gifts 
 
Sporting goods, Gadgets, More... 
 
Shop Now for Mother's Day! 
 
Earlybird Mother's Day specials. Shop early, save on shipping! 
 
More stuff for her... 
* Stuff for kids 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. 
* Stuff for pets 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<a class="moz-txt-link-freetext" href="http://www.sitepoint.com/examples/megadropdowns/completed.html">http://www.sitepoint.com/examples/megadropdowns/completed.html<;/a> 
 
You could get much the same visually with the WebbIE for Windows text
browser; <a href="http://www.webbie.org.uk/index.htm">http://www.webbie.org.uk/index.htm<;/a> 
</tt>This will show you fairly accurately what is sent to a screen
reader to be converted to voice so you don't have to guess how to set
up a scripted screen reader like JAWs. Or you could put ear to the <a
href="http://www.nvda-project.org/">NVDA</a> screen reader, a fairly
reasonable approximation of JAWs rendering without scripting, then you
can sit back and hear your pages in nearly the same delivery as JAWs. 
 
 
</body>
</html>

From: Geof Collis
Date: Wed, May 05 2010 6:18AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Sorry my JAWS isn't reading all those links so
what you proposed is not valid. My version 10.0 only sees 5 links

At 12:39 AM 5/5/2010, you wrote:
>Here are the results from the Linux text browser ELinks;
>
>[Links are bold;]
>
>Â MEGA Shop: We sell stuff!
>Â Mega Shop
>
>Â Skip navigation
>
>Â *Â Home
>Â Latest news, special deals, and more...
>Â *Â Stuff for him
>
>Â Menswear
>
>Â Shirts, T-shirts, Accessories, More...
>
>Â Gifts
>
>Â Sporting goods, Gadgets, More...
>
>Â Clearance!
>
>Â 40% off all photo accessories this weekend only. Don't miss out!
>
>Â More stuff for him...
>Â *Â Stuff for her
>
>Â Ladieswear
>
>Â Tops, Pants, Skirts, T-shirts, More...
>
>Â Gifts
>
>Â Sporting goods, Gadgets, More...
>
>Â Shop Now for Mother's Day!
>
>Â Earlybird Mother's Day specials. Shop early, save on shipping!
>
>Â More stuff for her...
>Â *Â Stuff for kids
>Â Lorem ipsum dolor sit amet, consectetur
>adipisicing elit, sed do eiusmod tempor
>incididunt ut labore et dolore magna aliqua.
>Â *Â Stuff for pets
>Â Lorem ipsum dolor sit amet, consectetur
>adipisicing elit, sed do eiusmod tempor
>incididunt ut labore et dolore magna aliqua.
>Â
><http://www.sitepoint.com/examples/megadropdowns/completed.html>;http://www.sitepoint.com/examples/megadropdowns/completed.htmlÂ
>
>
>You could get much the same visually with the
>WebbIE for Windows text browser;
><http://www.webbie.org.uk/index.htm>;http://www.webbie.org.uk/index.htm
>This will show you fairly accurately what is
>sent to a screen reader to be converted to voice
>so you don't have to guess how to set up a
>scripted screen reader like JAWs. Or you could
>put ear to the
><http://www.nvda-project.org/>;NVDA screen
>reader, a fairly reasonable approximation of
>JAWs rendering without scripting, then you can
>sit back and hear your pages in nearly the same delivery as JAWs.
>
>
>
>
>__________ Information from ESET NOD32
>Antivirus, version of virus signature database 5086 (20100504) __________
>
>The message was checked by ESET NOD32 Antivirus.
>
><http://www.eset.com>;http://www.eset.com
>

From: ckrugman
Date: Wed, May 05 2010 6:45AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Using JAWS 11 and IE8 I'm not finding any submenus or drop down menus. There
is only the general categories with links "STuff for her" "Stuff for him" "
etc.
Chuck
----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'UW Web Accessibility Group'" < = EMAIL ADDRESS REMOVED = >;
"'WebAIMDiscussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, May 04, 2010 5:03 PM
Subject: [WebAIM] accessibility of this drop down menu

> Can anyone please tell me if this type of menu is accessible to screen
> readers and non-mouse users?
> http://www.sitepoint.com/examples/megadropdowns/completed.html#
>
>
> When I tab through the navigation links, I can't get to the submenus.
>
> I am building a similar menu and concerns about it being usable for
> everyone (even those with Javascript turned off).
>
> Thank you,
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Sandy Feldman
Date: Wed, May 05 2010 9:03AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

hi Angela,

someone posted this recently. You may want to take a look:

http://www.projectseven.com/products/tools/accordion2/accessible/jaws-test/

Sandy

> Can anyone please tell me if this type of menu is accessible to screen readers and non-mouse users?
> http://www.sitepoint.com/examples/megadropdowns/completed.html#

From: David Farough
Date: Wed, May 05 2010 11:00AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

I was able to activate the link by tabbing to the desired heading, and
then routing the jaws cursor to the focus point and then using the left
mouse click button key to activate the link. After that point I could
use the arrow keys to move through the links. I don't know whether all
of the links were there though. I was not able to remove the links with
another click. And I did not try to activate the next heading to see
what happened to the text which was previously displayed.

David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779

>>> < = EMAIL ADDRESS REMOVED = > 07:45 AM Wednesday, May 05, 2010 >>>
Using JAWS 11 and IE8 I'm not finding any submenus or drop down menus.
There
is only the general categories with links "STuff for her" "Stuff for
him" "
etc.
Chuck
----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'UW Web Accessibility Group'" < = EMAIL ADDRESS REMOVED = >;
"'WebAIMDiscussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, May 04, 2010 5:03 PM
Subject: [WebAIM] accessibility of this drop down menu

> Can anyone please tell me if this type of menu is accessible to
screen
> readers and non-mouse users?
> http://www.sitepoint.com/examples/megadropdowns/completed.html#
>
>
> When I tab through the navigation links, I can't get to the
submenus.
>
> I am building a similar menu and concerns about it being usable for
> everyone (even those with Javascript turned off).
>
> Thank you,
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Angela French
Date: Wed, May 05 2010 1:06PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

I'm trying to implement a jQuery dropdown menu and am trying to add JS using the jquery API to make it accessible to keyboard users (and hopefully screenreaders). Does anyone know of a jquery dropmenu that is accessible so I don't have to keep banging my head on my desk? Thanks!

From: Claudia.Case
Date: Wed, May 05 2010 6:21PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Angela,
Have you checked the design patterns in the WAI-ARIA Authoring Practices 1.0? I think the Menu widget might be what you are looking for. Here's a link to the Menu widget design pattern: http://www.w3.org/TR/wai-aria-practices/#menu

In the Menu widget design pattern, you'll find a description of the pattern, guidelines for keyboard interaction guidelines, guidelines for roles, states and properties, as well as a working code example, if one is available. If you play around with the working code example, you'll get an idea of whether this pattern fits your needs.

You might find additional examples in codetalks.org's ARIA Test Cases, which are based on the WAI-ARIA design patterns: http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases

Hope this helps.

claudia

From: Geof Collis
Date: Wed, May 05 2010 6:39PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Perhaps someone can help me. I've read that drop down menus present a
problem to certain disabilities such as shaky hands, if this is true
then why are so many so keen to use drop down menus?

cheers

Geof

At 07:23 PM 5/5/2010, you wrote:
>Angela,
>Have you checked the design patterns in the WAI-ARIA Authoring
>Practices 1.0? I think the Menu widget might be what you are
>looking for. Here's a link to the Menu widget design pattern:
>http://www.w3.org/TR/wai-aria-practices/#menu
>
>In the Menu widget design pattern, you'll find a description of the
>pattern, guidelines for keyboard interaction guidelines, guidelines
>for roles, states and properties, as well as a working code example,
>if one is available. If you play around with the working code
>example, you'll get an idea of whether this pattern fits your needs.
>
>You might find additional examples in codetalks.org's ARIA Test
>Cases, which are based on the WAI-ARIA design patterns:
>http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases
>
>Hope this helps.
>
>claudia
>
>
>

From: Egan, Bim
Date: Thu, May 06 2010 5:09AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Hi Geof
The problem with dropdown menus like the one in the example that Angela
sent is that unless you can use a mouse, you can't reach any of the
links apart from those at the top level. Unfortunately the solution
that many web authors have used is a dropdown list that is completely
keyboard navigable, but impossible to bypass, (the worst I've seen had
160+ links in the navigation. That's 161 depressions of the tab key
before you get to the main content, and that's on every page you visit.

One solution is to use a menu according to the WAI-ARIA Authoring
Practices 1.0 patterns, as suggested by claudia, but if your authoring
skills aren't up to that, the low tech alternative is to ensure that the
top level links lead to section main pages that contain the subordinate
links.

Bim

From: ckrugman
Date: Thu, May 06 2010 8:21AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

This problem is address when using JAWS when in the drop down menu by
pressing the first letter of the word for the link in question taking the
user to those links that are presented alphabetically or alphanumerically.
What is more of an issue on some sights is when clicking on an item in the
drop down menu the click on the item immediately causes the new web page to
open as the item is immediately selected preventing the user from reading
through the choices.
Chuck
----- Original Message -----
From: "Egan, Bim" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, May 06, 2010 3:11 AM
Subject: Re: [WebAIM] accessibility of this drop down menu

> Hi Geof
> The problem with dropdown menus like the one in the example that Angela
> sent is that unless you can use a mouse, you can't reach any of the
> links apart from those at the top level. Unfortunately the solution
> that many web authors have used is a dropdown list that is completely
> keyboard navigable, but impossible to bypass, (the worst I've seen had
> 160+ links in the navigation. That's 161 depressions of the tab key
> before you get to the main content, and that's on every page you visit.
>
>
> One solution is to use a menu according to the WAI-ARIA Authoring
> Practices 1.0 patterns, as suggested by claudia, but if your authoring
> skills aren't up to that, the low tech alternative is to ensure that the
> top level links lead to section main pages that contain the subordinate
> links.
>
> Bim
>
>

From: Moore,Michael (DARS)
Date: Thu, May 06 2010 8:24AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Geof wrote

"Perhaps someone can help me. I've read that drop down menus present a
problem to certain disabilities such as shaky hands, if this is true
then why are so many so keen to use drop down menus? "

[Mike's Comments] The most vocal opposition to the drop down/fly out menus that we encounter is from folks who use screen magnifiers. It is extremely easy when using a screen magnifier to accidently trigger the menu to open and then you have to get below it to get it to close again.

As to the reasons that drop down menus are so popular, I think that it usually comes down to a belief that having a very large number of links in the menu improves usability of the site. Personally, I think that drop down menus are a poor substitute for good information architecture in a well organized site coupled with a good site search feature. For the record I usually lose arguments where I advocate against drop down navigation.

Mike

From: Geof Collis
Date: Thu, May 06 2010 8:54AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Hi Bim

I'm all for low tech if it is inclusive of all disabilities, I mean
how can a drop down menu be called accessible if it excludes certain
disabilities.

cheers

Geof
At 06:11 AM 5/6/2010, you wrote:
>Hi Geof
>The problem with dropdown menus like the one in the example that Angela
>sent is that unless you can use a mouse, you can't reach any of the
>links apart from those at the top level. Unfortunately the solution
>that many web authors have used is a dropdown list that is completely
>keyboard navigable, but impossible to bypass, (the worst I've seen had
>160+ links in the navigation. That's 161 depressions of the tab key
>before you get to the main content, and that's on every page you visit.
>
>
>One solution is to use a menu according to the WAI-ARIA Authoring
>Practices 1.0 patterns, as suggested by claudia, but if your authoring
>skills aren't up to that, the low tech alternative is to ensure that the
>top level links lead to section main pages that contain the subordinate
>links.
>
>Bim
>
>

From: Al Sparber
Date: Thu, May 06 2010 12:06PM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

From: "Egan, Bim" < = EMAIL ADDRESS REMOVED = >
> but if your authoring
> skills aren't up to that, the low tech alternative is to ensure that the
> top level links lead to section main pages that contain the subordinate
> links.

Actually, I think that is the best and most logical all around solution - especially when factoring Apple small devices into your
accessibility equation.

--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel

From: Egan, Bim
Date: Fri, May 14 2010 3:39AM
Subject: Re: accessibility of this drop down menu
← Previous message | Next message →

Hi Chuck,

You're right in your description of a dropdown list navigation, but the
type of menu that started this thread is a bit different, the dropdown
list and navigation you describe is created using the form component
SELECT element, and the problem you've described occurs when it is
activated using a JavaScript onChange event handler, which as you say,
fires off before the user has had a chance to work out what the options
are. The menu that Angela asked about is a bit different, it's just a
menu full of related links, often used for site wide navigation. If you
look at the example she sent, you'll see the difference.
http://www.sitepoint.com/examples/megadropdowns/completed.html#

The menu links from "Stuff for him" to the end of the list all have
links under them, but these are only available to you if you can use a
mouse, and as the top level, i.e. "Stuff for him" link doesn't do
anything except act as an anchor for the mouse activated list, there's
nowhere to go for keyboard only users. I imagine that this would also
be challenging for voice input access tech users, so it's a practice
that really needs to be avoided.

Cheers,

Bim

From: ckrugman
Date: Fri, May 14 2010 9:45AM
Subject: Re: accessibility of this drop down menu
← Previous message | No next message

Thanks for the information. Actually I described the other type of menu as
an example as I hadn't recalled it being addressed before.
Chuck
----- Original Message -----
From: "Egan, Bim" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, May 14, 2010 1:42 AM
Subject: Re: [WebAIM] accessibility of this drop down menu

> Hi Chuck,
>
> You're right in your description of a dropdown list navigation, but the
> type of menu that started this thread is a bit different, the dropdown
> list and navigation you describe is created using the form component
> SELECT element, and the problem you've described occurs when it is
> activated using a JavaScript onChange event handler, which as you say,
> fires off before the user has had a chance to work out what the options
> are. The menu that Angela asked about is a bit different, it's just a
> menu full of related links, often used for site wide navigation. If you
> look at the example she sent, you'll see the difference.
> http://www.sitepoint.com/examples/megadropdowns/completed.html#
>
> The menu links from "Stuff for him" to the end of the list all have
> links under them, but these are only available to you if you can use a
> mouse, and as the top level, i.e. "Stuff for him" link doesn't do
> anything except act as an anchor for the mouse activated list, there's
> nowhere to go for keyboard only users. I imagine that this would also
> be challenging for voice input access tech users, so it's a practice
> that really needs to be avoided.
>
> Cheers,
>
> Bim
>
>
>