WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multi selectable combo boxes

for

From: Bryan Garaventa
Date: Aug 28, 2023 9:37AM

When you say most, are you referring to simulated constructs like an ARIA combobox or ARIA listbox, or a native select element that has multiselect enabled?

The ARIA listbox widget doesn't require the use of the control key, see "Example 2: Multi-Select Listbox"
https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/

When implementing an ARIA combobox that generates a listbox, the same rules apply for that widget type, so control would still not be required.

Yes, if you have a non-standard control that uses unexpected keystrokes, discoverability will definitely be an issue, so that by itself would likely fail a WCAG criteria for that purpose.

All the best,
Bryan



-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Sumit Patel
Sent: Sunday, August 27, 2023 3:52 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Multi selectable combo boxes

Thanks for the examples.
Those are working fine.
In most of the scenarios where a user can select multiple options , they have to press and hold ctrl key and use arrow keys to perform this .
So, from an WCAG perspective , do we need to alert the user about this keyboard shortcuts ?if yes, is it a failure of 3.3.2 Labels or instructions ?
or since it is widely used, is it ok if it is not pre indicated ?


On 25/08/2023, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> Hi,
> Here are 2 examples of multiselect comboboxes that use the ARIA 1.2
> combobox design pattern.
>
> 1 Editable:
> https://whatsock.com/Templates/Comboboxes/Native%20Inputs,%20Multisele
> ct%20Editable%20with%20Substring%20Match/index.htm
> 2 Readonly:
> https://whatsock.com/Templates/Comboboxes/Simulated,%20Readonly%20Mult
> iselect/index.htm
>
> In these cases aria-selected is used to convey individual option
> selectability. Others have proposed using aria-checked for this
> purpose instead, however this doesn't work on iOS using VO. Only the
> ARIA multiselect listbox design pattern is best supported across both
> desktop and mobile at present.
>
> All the best,
> Bryan
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Sumit Patel
> Sent: Friday, August 25, 2023 8:30 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] Multi selectable combo boxes
>
> Hai all,
>
> I came across a combo box in which user can select multiple options at
> a time .
> Within this combo at the top there are Clear all and select all
> buttons , then the list of options
>
>
> On tab navigation, first focus goes to these buttons and then to the list.
> When the list gets tab focus, screen reader just announces "list
> option A 1 of 3 " (imagine first option is Option A and there are 3
> options within it) 1. Though using ctrl + space key, user can select /
> unselect options, Here my query is how a screen reader understand this
> is a multi selectable combo box with this announcement ?anything is missing here ?
>
> above given behavior is on tab navigation. Now, on arrow navigation,
> screen reader just announces "combo box clickable "
> It doesn't announce those 2 buttons or the list. when user press enter
> ke or space bar on this combo box, nothing happens.
> Here again, as per my understanding most of the visually impaired
> screen reader users prefer browse mode navigation over focus mode
> (arrow key over tab key ) . Then , screen reader user would not have
> any clue about this combo box unless and until they navigate to this using tab key.
>
> 2 . How to make this experience better for screen reader users ?
>
> Please keep in mind , I tested with NVDA in Chrome browser .
>
> Sharing any working accessible multi selectable combo box is
> appreciated
>
> Regards,
> Sumit.
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >