E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Sean Curtis
Date: Tue, Jan 30 2018 3:35PM
Subject: Examples of comboboxes supporting multiple selected options
No previous message | Next message →

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

From: Bryan Garaventa
Date: Tue, Jan 30 2018 4:55PM
Subject: Re: Examples of comboboxes supporting multiple selected options
← Previous message | Next message →

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sean Curtis
Sent: Tuesday, January 30, 2018 2:35 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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

From: Sean Curtis
Date: Tue, Jan 30 2018 5:32PM
Subject: Re: Examples of comboboxes supporting multiple selected options
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Sean Curtis
> Sent: Tuesday, January 30, 2018 2:35 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
> > > > > >

From: Bryan Garaventa
Date: Tue, Jan 30 2018 6:43PM
Subject: Re: Examples of comboboxes supporting multiple selectedoptions
← Previous message | No next message

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sean Curtis
Sent: Tuesday, January 30, 2018 4:32 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Sean Curtis
> Sent: Tuesday, January 30, 2018 2:35 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
> >