WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Multiple Menu

for

From: Patrick H. Lauke
Date: Jun 17, 2015 3:47PM

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/Redistributable/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