WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Multiple Menu

for

From: Howard Kramer
Date: Jun 18, 2015 11:16AM

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



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

AHEAD Association of Higher Education and Disability