WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessible example of double list box/picker

for

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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: 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Wednesday, July 19, 2017 9:43 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] accessible example of double list box/picker
>
> There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx)
> but I can't get to it with NVDA to test it.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bourne, Sarah (MASSIT)
> Sent: Wednesday, July 19, 2017 6:53 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] accessible example of double list box/picker
>
> 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
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > >

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, July 20, 2017 11:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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: Fri, Jul 21 2017 9:30AM
Subject: Re: accessible example of double list box/picker
← Previous message | Next message →

Never mind.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Friday, July 21, 2017 8:16 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, July 20, 2017 11:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, July 20, 2017 11:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Steve Faulkner
Sent: Friday, July 21, 2017 3:08 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

>
> 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/Redistributabl
> e/
> demo.htm
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Accessibility Fellow
> Level Access, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Wednesday, July 19, 2017 9:43 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] accessible example of double list box/picker
>
> There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx)
> but I can't get to it with NVDA to test it.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bourne, Sarah (MASSIT)
> Sent: Wednesday, July 19, 2017 6:53 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] accessible example of double list box/picker
>
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Friday, July 21, 2017 8:40 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, July 20, 2017 11:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessible example of double list box/picker

There is an example on Codepen (https://codepen.io/afrost/pen/EyQOxx) but I can't get to it with NVDA to test it.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bourne, Sarah (MASSIT)
Sent: Wednesday, July 19, 2017 6:53 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] accessible example of double list box/picker

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