WebAIM - Web Accessibility In Mind

E-mail List Archives

Multi selectable combo boxes

for

From: Sumit Patel
Date: Aug 25, 2023 9:30AM

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.