WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Multiple Menu

for

From: Bryan Garaventa
Date: Jun 18, 2015 5:52PM

Apologies, it's been busy.

I did check out the asmSelect on your demo page, and noticed the following:

In IE11, it's not possible to browse the list of Select element options using a screen reader without causing the announced option to automatically be added as you arrow down the list, nor is it possible to enable multiselect for non-contiguous selection.

In Firefox, it is possible to arrow around without causing auto selection, but you have to press Enter on one item at a time to add a selection. Also, if you arrow around, there is no way to unselect the item that has focus, so when you tab away you will automatically add that selection even if you didn't want to.

One thing to note, aria-checked is supported on the Option nodes of ARIA Listbox controls, so you can also use this method to convert a single select Listbox widget into a control that conveys checkable Options. E.G, while arrowing around within it, you can press Space to toggle checkability.

Best wishes,
Bryan

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Howard Kramer
Sent: Thursday, June 18, 2015 10:17 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Select Multiple Menu

Thanks Bryan, Patrick for your suggestions. The demo that Bryan provided looks promising - at least for the non-mobile platform. I'm trying to point a programmer here on campus to an actual demo that he can use as a model so that example will be very helpful. Did either of you check out the possible solution I pointed to in my original message at http://www.ryancramer.com/journal/entries/select_multiple/. Was curious if you found any flaws or accessibility problems in it. When testing with the keyboard and NVDA it seemed accessible.

-Howard

On Wed, Jun 17, 2015 at 3:47 PM, Patrick H. Lauke < <EMAIL REMOVED> >
wrote:

> On 17/06/2015 22:28, Bryan Garaventa wrote:
>
>> This is actually a pretty basic concept, use a multiselect or single
>> select, then use active elements to move the options from one to the other.
>> Just make sure that all are properly coded active elements with
>> informative labels, and a live region does help for status messages.
>>
>> You can do this with standard Select elements, or simulated ARIA
>> Listboxes.
>> E.G
>>
>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributab
>> le/demo.htm
>>
>
> I would still recommend refactoring this into something simpler (a
> list of regular checkboxes, rather than a full-fledged ARIA listbox),
> primarily because mobile AT support is very lacking for these sorts of
> complex patterns. For instance, with the above, iOS/VoiceOver does not
> announce the fact that you enter an actual listbox, and does not
> announce that any of the options are actually interactive (it simply
> announces them as "White", "Orange", etc as if they were just static
> text), though it does correctly identify when one is selected (but
> only after you leave the item and then return to it); Chrome/TalkBack
> also gives no indication of the listbox itself or the options being
> actionable, and also does not indicate when one is selected or not.
>
> As for using actual multiselects, I would posit that the keyboard
> interactions required for those may not be known that well to novice
> keyboard users (and I'm now having flashbacks to 9 years ago...
> http://webaim.org/discussion/mail_thread?thread'01).
>
> Bryan, one tiny additional note for your specific demo: the visual
> difference between a selected and not selected option is very faint
> and practically indistinguishable - the reversal of the subtle
> gradient is far too subtle. Suggest augmenting the CSS for selected
> options to something a bit stronger.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > archives at http://webaim.org/discussion/archives
> >



--
Howard Kramer
Conference Coordinator
Accessing Higher Ground
303-492-8672
cell: 720-351-8668

AHEAD Association of Higher Education and Disability