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

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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Steve Faulkner
Sent: Friday, July 21, 2017 3:08 AM
To: WebAIM Discussion List < <EMAIL 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 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 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >