WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Multiple Menu

for

From: Bryan Garaventa
Date: Jun 17, 2015 7:05PM

If you have a chance, please file the issues you described with Apple and Google against ARIA Listbox support, it would be nice if these controls were treated consistently.

Will do about the selected color contrast :) thanks!

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Patrick H. Lauke
Sent: Wednesday, June 17, 2015 2:48 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Accessible Select Multiple Menu

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/Redistributabl
> e/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