WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessibility of this drop down menu

for

From: Egan, Bim
Date: May 14, 2010 3:39AM

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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of
<EMAIL REMOVED>
Sent: 06 May 2010 14:23
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessibility of this drop down menu

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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Geof Collis
> Sent: 06 May 2010 00:39
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] accessibility of this drop down menu
>
> 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
>>
>>
>>-----Original Message-----
>>From: Angela French [mailto: <EMAIL REMOVED> ]
>>Sent: Tuesday, May 04, 2010 5:03 PM
>>To: 'UW Web Accessibility Group'; 'WebAIM Discussion List'
>>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/>;
>>
>>
>>