WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: improved select boxes - still accessible

for

From: deborah.kaplan@suberic.net
Date: Aug 20, 2012 2:20PM

I could not get this to work with NaturallySpeaking. (and unlike
Gary, I can get drop-down menus to work with DNS; I have had
luck with the "expand list" command. Gary, have you tried that?)

-Deborah

On Mon, 20 Aug 2012, Bryan Garaventa wrote:

> Can you do me a favor? If you go to the following demo using Dragon
> http://whatsock.com/modules/aria_sortable_listbox_module/demo.htm
>
> Can you use voice commands to tab to the Sort button, which is a standard
> button and should be actionable saying 'press enter'.
>
> The list should then be generated dynamically, and focus set on the first
> option. So from there you could say the following:
>
> 'press up' or 'press down' will navigate up and down the list
> 'press home' or 'press end' will jump to the start or end
> 'press space' will toggle an item to grab or drop
> 'press enter' will save the changes and rerender the list
>
> I'm totally blind, so this is difficult for me to confirm. I'm curious if
> this will work though.
>
>
>
> ----- Original Message -----
> From: "Morin, Gary (NIH/OD) [E]" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >; "Jonathan
> Avila" < <EMAIL REMOVED> >; "Marc Haunschild" < <EMAIL REMOVED> >;
> < <EMAIL REMOVED> >
> Cc: < <EMAIL REMOVED> >
> Sent: Monday, August 20, 2012 11:36 AM
> Subject: RE: [WebAIM] improved select boxes - still accessible
>
>
> Thanks, Bryan, for bringing this up - Dragon (and speech recognition
> software, in general). I can honestly say that I've never gotten a
> drop-down menu to work with DNS. Radio buttons and Check boxes work just
> fine for me, but not drop-down menus. I can land on the list, and often it
> even opens up. But actually scrolling down and selecting my choice - not a
> happening thing. If anyone can instruct me on what I'm doing wrong, I'd
> sure appreciate it!
>
> Gary
>
>
> -----Original Message-----
> From: Bryan Garaventa [mailto: <EMAIL REMOVED> ]
> Sent: Monday, August 20, 2012 1:31 PM
> To: Jonathan Avila; Marc Haunschild; <EMAIL REMOVED> ; WebAIM Discussion
> List
> Subject: Re: [WebAIM] improved select boxes - still accessible
>
> Will this work for Dragon usage as well, such as saying down to activate a
> keypress?
>
> ----- Original Message -----
> From: "Jonathan Avila" < <EMAIL REMOVED> >
> To: "Bryan Garaventa" < <EMAIL REMOVED> >; "Marc Haunschild"
> < <EMAIL REMOVED> >; < <EMAIL REMOVED> >; "WebAIM Discussion List"
> < <EMAIL REMOVED> >
> Sent: Monday, August 20, 2012 10:17 AM
> Subject: RE: improved select boxes - still accessible
>
>
>> [Bryan wrote]
>> The only way to make a control such as this keyboard accessible, is to use
>> tabindex=0 on each div tag when it's selected, and to either remove
>> tabindex
>> or set it to '-1' for every div that is not currently highlighted, then
>> set
>> focus to each such div programmatically using the .focus() method every
>> time
>> the arrow keys are pressed.
>>
>> Bryan, they may be able set tabIndex=0 on the parent div and then use
>> aria-activedescendant to indicate the active descendant of the widget.
>>
>> Jonathan
>>
>> -----Original Message-----
>> From: Bryan Garaventa [mailto: <EMAIL REMOVED> ]
>> Sent: Monday, August 20, 2012 12:32 PM
>> To: Marc Haunschild; <EMAIL REMOVED> ; WebAIM Discussion List
>> Subject: Re: improved select boxes - still accessible
>>
>> I agree, this is somewhat confusing. I'm including the W3C and WebAim list
>> on this because I think this is an important issue to bring up to the
>> community.
>>
>> Here is the tag structure for each of the select items in the sample you
>> referenced:
>>
>> <LI class="select2-results-dept-1 select2-result select2-result-selectable
>> select2-highlighted" jQuery17108271382708004837="227"><DIV
>> class=select2-result-label><SPAN
>> class=select2-match></SPAN>Hawaii</DIV></LI>
>>
>> The only thing that is happening when the arrow keys are used to navigate
>> the select options, is that the class 'highlighted' is being toggled.
>> Nothing else is occurring.
>>
>> The only way to make a control such as this keyboard accessible, is to use
>> tabindex=0 on each div tag when it's selected, and to either remove
>> tabindex
>> or set it to '-1' for every div that is not currently highlighted, then
>> set
>> focus to each such div programmatically using the .focus() method every
>> time
>> the arrow keys are pressed.
>>
>> Only then will the addition of ARIA actually work correctly. CSS cannot be
>> used for this purpose.
>>
>> Google has also done something similar at
>> https://groups.google.com/forum/?fromgroups#!overview
>>
>> Where, after logging in with your Google account login, you will find 6
>> ARIA
>> tree controls in the heading navigation.
>>
>> If you press Insert+F5 using JAWS, you can see them listed there in the
>> Form
>> Field list dialog.
>>
>> All of these controls include ARIA to make them accessible, and every
>> single
>> one of them is completely inaccessible for screen reader users, because
>> none
>> of them are keyboard accessible.
>>
>> This is why I've been saying that these concepts are critical for
>> developers
>> to understand.
>>
>> Otherwise, such inaccessible controls will continue to be propagated
>> across
>> the web with the assumption that ARIA will make them accessible, even when
>> it won't.
>>
>> ----- Original Message -----
>> From: "Marc Haunschild" < <EMAIL REMOVED> >
>> To: "Bryan Garaventa" < <EMAIL REMOVED> >
>> Sent: Monday, August 20, 2012 1:26 AM
>> Subject: Re: improved select boxes - still accessible
>>
>>
>>> Obviously there is something I do not understand: the visual change made
>>> by the CSS happens when the Element gets focus
>>>
>>> The selector is :focus
>>>
>>> And I CAN navigate with the arrow keys?!?
>>>
>>> We still talk about select 2 at http://ivaynberg.github.com/select2/, do
>>> we?
>>>
>>>
>>>
>>> Am 17.08.2012 20:03, schrieb Bryan Garaventa:
>>>> Hi, I understand your point.
>>>>
>>>> It's not a matter of the select action actually, but rather, the
>>>> programmatic functionality.
>>>>
>>>> The problem that I've been seeing a lot lately, is a widespread
>>>> assumption that the use of ARIA will make something accessible.
>>>>
>>>> This is not actually true; ARIA will enhance accessibility for a control
>>>> that is already accessible, but it can't make something that is not
>>>> accessible, accessible.
>>>>
>>>> For example, in the case of the select controls,
>>>>
>>>> However, literal keyboard focus is not being set on the various list
>>>> options when the keyboard is used to navigate between each select item.
>>>> You can see this by disabling CSS in your browser, then try to set focus
>>>> on the link that activates the drop down, activate it, then try using
>>>> the
>>>> arrow keys to see where focus is set.
>>>>
>>>> You will see that focus is not actually being moved between the various
>>>> options, making this control impossible to function from the keyboard,
>>>> and impossible to make a selection in the same manner as when you use
>>>> the
>>>> mouse to click a select item like "West Virginia". If you refrain from
>>>> using the mouse, it won't work.
>>>>
>>>> I've seen this before, where CSS is used to make something appear to be
>>>> happening, but in actuality, nothing is. This causes many problems,
>>>> because nothing that occurs in CSS for simulating the movement of focus
>>>> is accessible from the keyboard, and the use of ARIA in cases such as
>>>> these, only changes the feedback of an inaccessible control for screen
>>>> reader users, but doesn't make it any more accessible.
>>>>
>>>>
>>>>
>>>> ----- Original Message ----- From: "Marc Haunschild" < <EMAIL REMOVED> >
>>>> To: "Bryan Garaventa" < <EMAIL REMOVED> >
>>>> Sent: Friday, August 17, 2012 2:28 AM
>>>> Subject: Re: improved select boxes - still accessible
>>>>
>>>>
>>>>> Hi Bryan,
>>>>>
>>>>> thanks for your answer - as far as I understood, hitting return (or
>>>>> clicking an item) does not do anything, because using this example does
>>>>> not trigger any action. It just shows how to select items, but nothing
>>>>> is sent. ;-)
>>>>>
>>>>> Marc
>>>>>
>>>>>
>>>>>
>>>>> Am 16.08.2012 08:27, schrieb Bryan Garaventa:
>>>>>> If this is helpful, I've updated the ARIA Listbox Generator,
>>>>>> documented
>>>>>> at
>>>>>> http://lnkd.in/CKfG9x
>>>>>>
>>>>>> The ARIA Listbox Generator automates the process of rendering keyboard
>>>>>> and screen reader accessible listbox controls, which are instantiated
>>>>>> as independent Listbox objects.
>>>>>>
>>>>>> These Listbox objects support current selection tracking, callbacks,
>>>>>> dynamic addition and deletion of new option elements, dynamic getting
>>>>>> and setting, keyboard accessible sortability, and multiselect.
>>>>>>
>>>>>> ----- Original Message ----- From: "Marc Haunschild" < <EMAIL REMOVED> >
>>>>>> To: < <EMAIL REMOVED> >
>>>>>> Sent: Wednesday, August 15, 2012 10:46 PM
>>>>>> Subject: improved select boxes - still accessible
>>>>>>
>>>>>>
>>>>>>> Hi everyone,
>>>>>>>
>>>>>>> I found two really interesting javaScript upgrades for select boxes.
>>>>>>> I
>>>>>>> want to use them, but I wonder if they are accessible in jaws and
>>>>>>> other screenreader software.
>>>>>>>
>>>>>>> Also I would like to get some general feedback. Is it confusing to
>>>>>>> interact with these modified boxes? Or do you think the improvements
>>>>>>> are helpful?
>>>>>>>
>>>>>>> I am grateful for any response!
>>>>>>>
>>>>>>> Thanks for your help!
>>>>>>>
>>>>>>> Marc
>
>
> > > >