WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples of comboboxes supporting multiple selectedoptions

for

From: Bryan Garaventa
Date: Jan 30, 2018 6:43PM

Hi,
Actually you are encountering a bug in Safari
https://bugs.webkit.org/show_bug.cgi?id7680
This has been a bug in Safari for years, it would be nice if Apple would finally get around to fixing it. I remember first mentioning this to them back in 2012.

In regard to Chrome, Chrome is not a browser that is best supported in combination with mainstream screen readers, especially in regard to complex interactive ARIA widget constructs.

The following is an editable version of the same functionality, which is more applicable to your email analogy.
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

The following steps were tested using JAWS2018 and NVDA in IE11, Firefox, and Chrome Canary, and aside from issues where NVDA is not announcing live regions properly nor the correct selected state in IE11, nor is JAWS announcing live regions properly in Chrome, all of them are functionally accessible regardless.

1. Open the test page above with JAWS or NVDA running in either IE11, Firefox, or Chrome Canary.

2. Set focus into the editable Combobox, and type "hu".

3. After the autopopulated list appears, press the Down arrow to enter the dropdown list, then press Up and Down to move within the filtered results and press the Spacebar to check the desired options.

4. Press Enter to save your selections, then type "sci" in the edit field to bring up a new list of search results.

5. Press Down to enter the dropdown and move up and down within the list and press the Spacebar to check your desired authors, then press the Tab key to save your selections and move to the next element in the tab order, which is the Clear button.

You can see your selections within a list below the buttons. When using JAWS in Chrome, it may be necessary to press Insert+Escape to refresh the virtual buffer because it is not updating properly when dynamic content changes occur at times, which is a JAWS bug.


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 Sean Curtis
Sent: Tuesday, January 30, 2018 4:32 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Examples of comboboxes supporting multiple selected options

Hi Bryan,

I tried the whatsock version out in both Chrome and Safari using Voiceover, but while the component communicated open state, moving through suggestions and selecting them did not work. Is this due to poor support by VO, the browsers, or a combination of both?

I tried
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm
as well but ran into the same issue. The example you linked to does list the selected values on the page, but these can't be cleared out without searching for them in the list first.

The combobox style most commonly used is like the "Contributors (async)"
example on https://jedwatson.github.io/react-select/

Cheers,

Sean

On Wed, Jan 31, 2018 at 10:55 AM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

> Hi,
> This implementation combines the ARIA Combobox design pattern plus the
> checkable ARIA Listbox patterns to accomplish this accessibly.
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> 20Comboboxes%20(Simulated,%20Readonly%20Multiselect)/demo.htm
>
> This is included within the TSG Combobox section at
> http://whatsock.com/tsg/#tgl-2-22
> And within the Coding Arena archive at https://github.com/accdc/tsg
>
> Best wishes,
> 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 Sean Curtis
> Sent: Tuesday, January 30, 2018 2:35 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] Examples of comboboxes supporting multiple selected
> options
>
> I've found many examples of accessible autocompletes, some
> single-choice combobox components, but I've yet to find one that
> handles multiple selected options. I'm trying to work out the best
> pattern for interacting with selected values. Often they appear as a
> bunch of lozenges beside the input field, with little "X" buttons to
> clear the values. This is a pattern used often in address fields when composing an email.
>
> I've looked at the one used by Gmail, and iCloud mail, but while they
> do highlight a selected option visually when hitting left/right with
> the keyboard, that selection is not announced to a screen reader.
>
> Ideally they wouldn't be a focusable element as it'd make tabbing
> through a form exhausting. Is using left/right (and
> aria-activedescendant) to highlight currently selected values, and
> up/down to open and navigate additional, as-yet-unselected options a decent compromise?
>
> Are there any good examples around that I've just missed?
>
> Cheers,
>
> Sean
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >