WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multi selectable combo boxes

for

From: Graham Armfield
Date: Aug 27, 2023 9:02AM

Use of the Ctrl key and pointing device reminds me of using the multiple
attribute on the <select> HTML element, which I believe is not accessible
to some people including screen reader users and voice recognition users.

Surely a simpler and more accessible approach would be to have a group of
checkboxes - perhaps in a revealed panel if required.

Regards
Graham Armfield
Coolfields Consulting

On Sun, 27 Aug 2023, 12:51 pm Sumit Patel, < <EMAIL REMOVED> >
wrote:

> 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.
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
> > > > >