WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multi selectable combo boxes

for

From: Sumit Patel
Date: Aug 27, 2023 4:51AM

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,%20Multiselect%20Editable%20with%20Substring%20Match/index.htm
> 2 Readonly:
> https://whatsock.com/Templates/Comboboxes/Simulated,%20Readonly%20Multiselect/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.
> > > http://webaim.org/discussion/archives
> >
> > > > >