WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessibility of this drop down menu

for

From: ckrugman@sbcglobal.net
Date: May 14, 2010 9:45AM

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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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
>
>
> -----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/>;
>>>
>>>
>>>