E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Howard Kramer
Date: Wed, Jun 17 2015 2:31PM
Subject: Accessible Select Multiple Menu
No previous message | Next message →

Hello All:

I've been searching the Web for Accessible Multiple Select using two select
Multiples (also know as option transfer). Hopefully I haven't lost you all
by this point. In other words, a select multiple where your selections get
transferred to another Multiple Select (I know, much clearer). This is
sometimes used in lieu of a drag and drop.

Ryan Cramer suggests using the jQuery ASMSELECT plugin. He has a
demonstration and explanation of it at
http://www.ryancramer.com/journal/entries/select_multiple/. Go about
halfway down the page under the ASMSELECT heading.

Is there a best practice or best solution on this issue. Note I looked on
Paul J. Adam's site where I often find solutions to these types of widget
issues but couldn't find anything.

Thanks in advance.

-Howard








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

AHEAD Association of Higher Education and Disability

From: Patrick H. Lauke
Date: Wed, Jun 17 2015 3:05PM
Subject: Re: Accessible Select Multiple Menu
← Previous message | Next message →

On 17/06/2015 21:31, Howard Kramer wrote:
> Hello All:
>
> I've been searching the Web for Accessible Multiple Select using two select
> Multiples (also know as option transfer). Hopefully I haven't lost you all
> by this point. In other words, a select multiple where your selections get
> transferred to another Multiple Select (I know, much clearer). This is
> sometimes used in lieu of a drag and drop.
>
> Ryan Cramer suggests using the jQuery ASMSELECT plugin. He has a
> demonstration and explanation of it at
> http://www.ryancramer.com/journal/entries/select_multiple/. Go about
> halfway down the page under the ASMSELECT heading.

Breaking it up into two scrollable lists of checkboxes would probably be
my first instinct too - much more straightforward to use that actual
multi-select <select> constructs.

Perhaps throwing in an ARIA live region that gives some feedback (a la
"Selected items moved to X", "Selected items removed from X").

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

From: Bryan Garaventa
Date: Wed, Jun 17 2015 3:28PM
Subject: Re: Accessible Select Multiple Menu
← Previous message | Next message →

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

Best wishes,
Bryan

From: Patrick H. Lauke
Date: Wed, Jun 17 2015 3:47PM
Subject: Re: Accessible Select Multiple Menu
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Wed, Jun 17 2015 7:05PM
Subject: Re: Accessible Select Multiple Menu
← Previous message | Next message →

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!

From: Howard Kramer
Date: Thu, Jun 18 2015 11:16AM
Subject: Re: Accessible Select Multiple Menu
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Thu, Jun 18 2015 5:52PM
Subject: Re: Accessible Select Multiple Menu
← Previous message | No next message

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