WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible example of double list box/picker

for

From: Angela French
Date: Jul 21, 2017 9:40AM

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