WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples of comboboxes supporting multiple selected options

for

From: Sean Curtis
Date: Jan 30, 2018 5:32PM

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
> > > at http://webaim.org/discussion/archives
> > > > > >