WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multi selectable combo boxes

for

From: Bryan Garaventa
Date: Aug 25, 2023 10:34AM

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.