WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible example of double list box/picker

for

From: Bryan Garaventa
Date: Jul 21, 2017 11:26AM

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 REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Friday, July 21, 2017 8:40 AM
To: WebAIM Discussion List < <EMAIL 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 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 REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Wednesday, July 19, 2017 9:43 AM
To: WebAIM Discussion List < <EMAIL 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 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 REMOVED>
http://www.mass.gov/MassIT