E-mail List Archives
Thread: Multi selectable combo boxes
Number of posts in this thread: 7 (In chronological order)
From: Sumit Patel
Date: Fri, Aug 25 2023 9:30AM
Subject: Multi selectable combo boxes
No previous message | Next message →
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.
From: Bryan Garaventa
Date: Fri, Aug 25 2023 10:34AM
Subject: Re: Multi selectable combo boxes
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Sumit Patel
Sent: Friday, August 25, 2023 8:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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.
From: Sumit Patel
Date: Sun, Aug 27 2023 4:51AM
Subject: Re: Multi selectable combo boxes
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Sumit
> Patel
> Sent: Friday, August 25, 2023 8:30 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
> >
> > > > >
From: Graham Armfield
Date: Sun, Aug 27 2023 9:02AM
Subject: Re: Multi selectable combo boxes
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Sumit
> > Patel
> > Sent: Friday, August 25, 2023 8:30 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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
> > > >
> > > > > > > > > >
> > > > >
From: Bryan Garaventa
Date: Mon, Aug 28 2023 9:37AM
Subject: Re: Multi selectable combo boxes
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Sumit Patel
Sent: Sunday, August 27, 2023 3:52 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Sumit Patel
> Sent: Friday, August 25, 2023 8:30 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
> >
From: Brian Lovely
Date: Mon, Aug 28 2023 12:50PM
Subject: Re: [External Sender] Multi selectable combo boxes
← Previous message | Next message →
I recently discovered that, at least on a PC with or without NVDA running,
I could successfully use a native HTML multiselect with the keyboard alone.
It's not something I encounter a lot, but I remember the last time I had I
couldn't select multiple options. It's been a few years, and I don't know
when that changed, but it seems like the select with the multiple attribute
can be used with the keyboard alone on a PC. I don't know off the top of my
head if it's the same on a Mac.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Steve Green
Date: Mon, Aug 28 2023 1:11PM
Subject: Re: [External Sender] Multi selectable combo boxes
← Previous message | No next message
Selecting multiple options isn't the problem with native HTML multiselect. A much bigger problem is that when you revisit the control, there is no way to know that multiple selections have been made and it is very easy to accidentally deselect them.
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Brian Lovely via WebAIM-Forum
Sent: Monday, August 28, 2023 7:50 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: Brian Lovely < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [External Sender] Re: Multi selectable combo boxes
I recently discovered that, at least on a PC with or without NVDA running, I could successfully use a native HTML multiselect with the keyboard alone.
It's not something I encounter a lot, but I remember the last time I had I couldn't select multiple options. It's been a few years, and I don't know when that changed, but it seems like the select with the multiple attribute can be used with the keyboard alone on a PC. I don't know off the top of my head if it's the same on a Mac.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.