E-mail List Archives
Thread: Accessible Select Multiple Menu
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
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Howard Kramer
Sent: Wednesday, June 17, 2015 1:32 PM
To: WebAIM Discussion List; Access Technology Higher Education Network
Subject: [WebAIM] Accessible Select Multiple Menu
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: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!
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Wednesday, June 17, 2015 2:48 PM
To: = EMAIL ADDRESS 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
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
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS 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 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/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