E-mail List Archives
Thread: accessible example of double list box/picker
Number of posts in this thread: 12 (In chronological order)
From: Angela French
Date: Tue, Jul 18 2017 5:28PM
Subject: accessible example of double list box/picker
No previous message | Next message →
Hello,
I am trying to find an example of a well-implemented, accessible, double list picker. I'm not sure if that is the correct name for what I'm referring to however.
I'm looking for the functionality where the user picks items from a select list then uses a button to move the item to an adjacent list box.
The big question for me is how to adequately label what the first list is and what where the list item is going once it is selected and moved to the other box. In other words how do we lay this out and label it so that a screen reader user doesn't have to go forward then backward to learn what the lists are?
Thanks for any advice or links to good examples.
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Bourne, Sarah (MASSIT)
Date: Wed, Jul 19 2017 7:52AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Angela,
This sounds like the interface you use to customize Microsoft Office products. In Word, for example, select the File tab and the select Options, which pops open a dialog box. Select "Customize Ribbon" or "Quick Access Toolbar" to see how they have implemented a two column picker. (Note: they allow you to move things out of the second list, too.)
I just have the desktop version of Office, so I can't check to see if they use a similar interface on their online versions.
sb
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 811 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/MassIT
From: Angela French
Date: Wed, Jul 19 2017 10:42AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.
From: Angela French
Date: Wed, Jul 19 2017 3:14PM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Yes, that is similar to what I am talking about. However, I need an html/javascript implementation of it. Or at least advice on how to adequately label things to indicate (to a screen reader user) what is being moved to what .
Angela French
From: Angela French
Date: Wed, Jul 19 2017 3:24PM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Here is another example (Example 2: Multi-Select Listbox), but I couldn't navigate it using my keyboard and NVDA.
http://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html
Angela
From: Bryan Garaventa
Date: Fri, Jul 21 2017 12:39AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Hi,
There is this one, which exposes bugs in JAWS18 in IE11 where multiselectable ARIA Listboxes are still not being supported properly.
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/demo.htm
All the best,
Bryan
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Steve Faulkner
Date: Fri, Jul 21 2017 4:07AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
>
> There is this one, which exposes bugs in JAWS18 in IE11 where
> multiselectable ARIA Listboxes are still not being supported properly.
Hi Bryan, if you can kindly send me a bug report, with steps to reproduce,
expected and current behaviour I will file a bug on JAWS.
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
On 21 July 2017 at 07:39, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi,
> There is this one, which exposes bugs in JAWS18 in IE11 where
> multiselectable ARIA Listboxes are still not being supported properly.
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/
> demo.htm
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Accessibility Fellow
> Level Access, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
>
From: Angela French
Date: Fri, Jul 21 2017 9:16AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Bryan, what do you mean by "press the spacebar to toggle selection." Toggle between what? Pressing my spacebar doesn't do anything. I have a weird keyboard though.
Angela French
From: Angela French
Date: Fri, Jul 21 2017 9:30AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Never mind.
From: Angela French
Date: Fri, Jul 21 2017 9:40AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
So Bryan, how does a screen reader user know what the two lists are (their headgin)? I can read that they are Cart and Basket, but a screen reader (NVDA) doesn't tell me that? The page I need to work out will have three such sets of redistributable lists. The only think I could think of is instructions before the lists and perhaps aria-label on the Add and Remove labels to read what they are being added/removed from.
Angela French
From: Bryan Garaventa
Date: Fri, Jul 21 2017 11:17AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →
Thank you, I would appreciate that. There are actually several bugs relating to JAWS interaction with ARIA Listbox widgets in IE11.
Bug1: When arrowing down the page in the Virtual Cursor, all Listbox controls are conveyed twice as though there are two different Listbox widgets on the page, even though there is only one such represented in the accessibility tree.
The same issue occurs for ARIA Tabs as shown here too:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Tabs/ARIA%20Tabs%20(Internal%20Content)/demo.htm
Steps to reproduce:
1. Open the test page
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/demo.htm
with JAWS running in IE11 on Windows7.
2. Starting at the top of the page, press the Down arrow repeatedly until the Listbox is reached.
3. Continue pressing the Down arrow in Virtual Cursor mode past the Listbox and confirm that the Listbox is followed immediately by a ghost Listbox that does not exist.
Bug2: JAWS does not represent an ARIA Listbox as a single line form field in the same manner as seen within Firefox when viewing the same Listbox.
Steps to reproduce:
1. Open the test page
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/demo.htm
with JAWS running in IE11 on Windows7.
2. Starting at the top of the page, press the Down arrow repeatedly until the Listbox is reached.
3. Continue pressing the Down arrow in Virtual Cursor mode past the Listbox and confirm that the Listbox is represented on multiple lines within the Virtual Buffer.
4. Now perform steps 1 through 3 using Firefox on Windows7 and confirm that the ARIA Listbox is only represented on one line in the Virtual Buffer.
Bug3: When an ARIA Listbox is represented as a multiselectable Listbox widget using aria-multiselectable, JAWS does not convey the current state of the aria-selected attribute value when moving between Listbox Options, making it impossible to determine which Options are currently selected and which ones are not.
Steps to reproduce:
1. Open the test page
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/demo.htm
with JAWS running in IE11 on Windows7.
2. Press the 'f' key to jump to the nearest ARIA Listbox after the page loads.
3. Press Enter to activate Forms Mode.
4. Press the Up and Down arrow keys to navigate through the Listbox and press the Spacebar to toggle selection on or off upon each.
5. Confirm that JAWS does not convey the selected state when arrowing up and down within the Listbox, making it impossible to determine audibly which Options are selected and which ones are not.
There is a possible bug4 as well, where the dynamic content aspect of ARIA Listboxes are not reliably interactable, but this one is hard to reproduce.
E.G
Steps to reproduce:
1. Open the test page
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Listboxes/Redistributable/demo.htm
with JAWS running in IE11 on Windows7.
2. Press the 'f' key to jump to the nearest ARIA Listbox after the page loads.
3. Press Enter to activate Forms Mode.
4. Press the Up and Down arrow keys to navigate through the Listbox.
5. Confirm that JAWS does not appear to recognize that focus is within a Listbox widget and nothing is announced when arrowing.
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Bryan Garaventa
Date: Fri, Jul 21 2017 11:26AM
Subject: Re: accessible example of double list box/picker
← Previous message | No next message
Hi,
You can certainly extend the labelling if you want more explicit identifications of such fields. You can see how this is currently implemented in the GitHub archive at
https://github.com/accdc/tsg
Within the folder "Coding Arena/ARIA Listboxes"
If you are going to have multiple instances of different redistributable listboxes like this on the same page, I recommend surrounding each of them with a landmark or region that includes an explicit label that identifies the difference between each.
E.G
<div role="region" aria-label="Unique Name Here">
*** Associated Listbox widgets here. ***
</div>
This way, the beginning and ending boundaries will be conveyed between each section, the user can quickly navigate to the desired section or past an undesired one, and the purpose of the section is clear.
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com