E-mail List Archives
Thread: Which control for deselectable, mutually exclusive options?
Number of posts in this thread: 5 (In chronological order)
From: Isabel Holdsworth
Date: Fri, Jan 18 2019 4:50AM
Subject: Which control for deselectable, mutually exclusive options?
No previous message | Next message →
Hi there,
We have some forms where users need to choose a single answer from a
group of possible options. Radio buttons would be perfect for this
scenario.
But once the user has selected an answer, they need to be able to
deselect it if they change their mind. Radio buttons aren't
deselectable, so they're not fit for purpose.
What would be the best element to use for these forms?
We could do something fancy and create a group of options that look
like buttonms but behave like a <select> list. But speech input
doesn't tend to cope well with elements that are masked as different
element types. And hacks like this are offensive to my purist
mentality :-)
Any suggestions gratefully received.
Kind regards, Isabel
From: Aditya
Date: Fri, Jan 18 2019 4:59AM
Subject: Re: Which control for deselectable, mutually exclusive options?
← Previous message | Next message →
You can add one more radio button option which would be some thing like "None".
Or add a button "Clear Selection" that resets the radio group.
Sent from my iPhone
> On Jan 18, 2019, at 5:50 AM, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi there,
>
> We have some forms where users need to choose a single answer from a
> group of possible options. Radio buttons would be perfect for this
> scenario.
>
> But once the user has selected an answer, they need to be able to
> deselect it if they change their mind. Radio buttons aren't
> deselectable, so they're not fit for purpose.
>
> What would be the best element to use for these forms?
>
> We could do something fancy and create a group of options that look
> like buttonms but behave like a <select> list. But speech input
> doesn't tend to cope well with elements that are masked as different
> element types. And hacks like this are offensive to my purist
> mentality :-)
>
> Any suggestions gratefully received.
>
> Kind regards, Isabel
> > > >
From: Mark Magennis
Date: Fri, Jan 18 2019 7:33AM
Subject: Re: Which control for deselectable, mutually exclusive options?
← Previous message | Next message →
Hi Isabel,
You could make each one a toggle button using <button>. But don't use aria-pressed if any of your users are using IE11 (which still includes most JAWS users) because IE doesn't support aria-pressed correctly. This is a pity because aria-pressed has the semantics to allow AT to report the current state and any change in state, but that doesn't happen in IE (with either JAWS or NVDA).
You can easily create a toggle button without aria-pressed by changing the button's name when its state changes to indicate the new action, e.g. from "select French" to "unslect French". Make sure the button name is an action, not the state, because button names are always actions. Provide feedback to screen reader users using aria-live, e.g. "French is selected" or "You selected French". The button would need to have the additional action of changing the status of the currently 'selected' button in the group (if there is one) to 'unselected'. You'll need to inform users up front that the group only allows one selection so that they know this will happen. If you still feel it may not be clear, consider adding information about the additional action to the screen reader feedback, e.g. "French selected and German unselected".
And don't make them look like standard radio buttons because otherwise users will think they are standard radio buttons.
Mark
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Isabel Holdsworth
Sent: 18 January 2019 11:51
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Which control for deselectable, mutually exclusive options?
Hi there,
We have some forms where users need to choose a single answer from a
group of possible options. Radio buttons would be perfect for this
scenario.
But once the user has selected an answer, they need to be able to
deselect it if they change their mind. Radio buttons aren't
deselectable, so they're not fit for purpose.
What would be the best element to use for these forms?
We could do something fancy and create a group of options that look
like buttonms but behave like a <select> list. But speech input
doesn't tend to cope well with elements that are masked as different
element types. And hacks like this are offensive to my purist
mentality :-)
Any suggestions gratefully received.
Kind regards, Isabel
From: Isabel Holdsworth
Date: Fri, Jan 18 2019 8:05AM
Subject: Re: Which control for deselectable, mutually exclusive options?
← Previous message | Next message →
Thanks guys.
I like the idea of a group of radiobuttons with a "Clear selection" button.
Standard buttons aren't generally considered mutually exclusive, and
I'm concerned that some users might not read all of the bumph before
the buttons and might think that pressing a second button means
they've made two selections.
Cheers, Isabel
On 18/01/2019, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Isabel,
>
> You could make each one a toggle button using <button>. But don't use
> aria-pressed if any of your users are using IE11 (which still includes most
> JAWS users) because IE doesn't support aria-pressed correctly. This is a
> pity because aria-pressed has the semantics to allow AT to report the
> current state and any change in state, but that doesn't happen in IE (with
> either JAWS or NVDA).
>
> You can easily create a toggle button without aria-pressed by changing the
> button's name when its state changes to indicate the new action, e.g. from
> "select French" to "unslect French". Make sure the button name is an action,
> not the state, because button names are always actions. Provide feedback to
> screen reader users using aria-live, e.g. "French is selected" or "You
> selected French". The button would need to have the additional action of
> changing the status of the currently 'selected' button in the group (if
> there is one) to 'unselected'. You'll need to inform users up front that the
> group only allows one selection so that they know this will happen. If you
> still feel it may not be clear, consider adding information about the
> additional action to the screen reader feedback, e.g. "French selected and
> German unselected".
>
> And don't make them look like standard radio buttons because otherwise users
> will think they are standard radio buttons.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Isabel Holdsworth
> Sent: 18 January 2019 11:51
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Which control for deselectable, mutually exclusive
> options?
>
> Hi there,
>
> We have some forms where users need to choose a single answer from a
> group of possible options. Radio buttons would be perfect for this
> scenario.
>
> But once the user has selected an answer, they need to be able to
> deselect it if they change their mind. Radio buttons aren't
> deselectable, so they're not fit for purpose.
>
> What would be the best element to use for these forms?
>
> We could do something fancy and create a group of options that look
> like buttonms but behave like a <select> list. But speech input
> doesn't tend to cope well with elements that are masked as different
> element types. And hacks like this are offensive to my purist
> mentality :-)
>
> Any suggestions gratefully received.
>
> Kind regards, Isabel
> > > > > > > > >
From: Mallory
Date: Tue, Jan 22 2019 9:37AM
Subject: Re: Which control for deselectable, mutually exclusive options?
← Previous message | No next message
Only thing I'd keep in mind is check if that'll indeed clear it in all browsers.
Back in the day, many UAs I would test in made one of the radios selected by
default even though we encouraged other devs to always set one to "checked".
So far from my memory they can all be unchecked today but... I would test.
cheers,
Mallory
On Fri, Jan 18, 2019, at 4:06 PM, Isabel Holdsworth wrote:
> Thanks guys.
> I like the idea of a group of radiobuttons with a "Clear selection" button.
> Standard buttons aren't generally considered mutually exclusive, and
> I'm concerned that some users might not read all of the bumph before
> the buttons and might think that pressing a second button means
> they've made two selections.
> Cheers, Isabel