E-mail List Archives
Thread: Unlabelled radio buttons
Number of posts in this thread: 5 (In chronological order)
From: Steve Green
Date: Wed, Sep 05 2018 9:08AM
Subject: Unlabelled radio buttons
No previous message | Next message →
Radio buttons are definitely the right way to do this, with one to leave a question unanswered as you described. Use hidden labels for any radio buttons that don't have visible ones.
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Isabel Holdsworth
Sent: 05 September 2018 16:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Unlabelled radiobuttons
Hi all,
I've been tasked with creating a UI for presenting Likert scale questions, where the answers range from one extreme to another. For example "Strongly disagree" up to "Strongly agree", or "Very dissatisfied" up to "Very satisfied".
The UI can present a single question or a series of questions whose answers are all on the same scale.
For the multiple questions, I presented them in a table with the questions on the left and their associated radiobuttons distributed across the row. The radiobuttons took their labels from the row headings. It was a really accessible solution.
But now I'm told that not every option will always have an explicit label. They gave me an example where 1 = very sad, 4 = neutral, 7 = very happy, and the other options are unlabelled.
So I thought a slider might work. I got a nice set of sliders working with the question as the label, the labelled options being picked up by the aria-valuetext attribute, and unlabelled steps in the slider having their default numeric values.
But that's not quite what's needed either, since there needs to be the option to clear an answer and leave the question unanswered, which AFAIK can't be done using a slider.
If I fall back to the radiobutton option, I could add a "Clear answer"
button that deselects a selected radiobutton. They want checkboxes, as these can be natively deselected, but I hope I've convinced them that this is the wrong mechanism for single-option answers.
Do you think that radiobuttons are the correct mechanism for presenting this sort of scenario?
All thoughts and comments welcome as always.
Thanks, Isabel
From: glen walker
Date: Wed, Sep 05 2018 12:37PM
Subject: Re: Unlabelled radio buttons
← Previous message | Next message →
I agree with Steve and was my first impression when I first read your
question.
The hidden labels for the example of "1 = very sad", "4 = neutral", "7 =
very happy" don't have to be actual terms that are between "very sad" and
"neutral", such as "sad" (2) or "a little sad" (3). I think if your
numbers were included with the labels for the three spelled out values, and
then just plain numbers for the unlabelled ones, then it should make
sense. Something like this:
<input type="radio" name="q1" id="r1"><label for="r1">1 - very sad</label>
<input type="radio" name="q1" id="r2"><label for="r2">2</label>
<input type="radio" name="q1" id="r3"><label for="r3">3</label>
<input type="radio" name="q1" id="r4"><label for="r4">4 - neutral</label>
<input type="radio" name="q1" id="r5"><label for="r5">5</label>
<input type="radio" name="q1" id="r6"><label for="r6">6</label>
<input type="radio" name="q1" id="r7"><label for="r7">7 - very happy</label>
As I move through the radio buttons, I'd hear
- "1 - very sad"
- "2"
- "3"
- "4 - neutral"
- "5"
- "6"
- "7 - very happy"
I think I would get the gist that I'm listening to a scale and that very
sad is 1 and neutral is 4 and that I have a few choices in between.
Of course, you could certainly add (visually hidden) terms in the middle if
you wanted.
<input type="radio" name="q1" id="r5" aria-label="5 - a little happy">
<input type="radio" name="q1" id="r6" aria-label="6 - happy">
On Wed, Sep 5, 2018 at 9:08 AM Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:
> Radio buttons are definitely the right way to do this, with one to leave a
> question unanswered as you described. Use hidden labels for any radio
> buttons that don't have visible ones.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
>
From: Isabel Holdsworth
Date: Thu, Sep 06 2018 2:23AM
Subject: Re: Unlabelled radio buttons
← Previous message | Next message →
Thanks guys. The reason I tried out the slider was that sometimes an
answer only needs to be approximate, and in those situations a slider
would work well. But not if it's possible to leave a question
unanswered.
I really like the "Not answered" radiobutton option, but I suspect it
won't get past our client's design people.
I did mock up a set of numbered radiobuttons, but a numbered scale
isn't part of the question authoring UI, and there's a perception that
deriving the numbered labels from the order of the radiobuttons might
apply a high number to a negative answer and vice versa, which could
cause confusion. But it's a better option than no labels at all, so
they'll have to run with that one.
Thanks again guys - I really appreciate your comments.
Cheers, Isabel
On 05/09/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I agree with Steve and was my first impression when I first read your
> question.
>
> The hidden labels for the example of "1 = very sad", "4 = neutral", "7 =
> very happy" don't have to be actual terms that are between "very sad" and
> "neutral", such as "sad" (2) or "a little sad" (3). I think if your
> numbers were included with the labels for the three spelled out values, and
> then just plain numbers for the unlabelled ones, then it should make
> sense. Something like this:
>
> <input type="radio" name="q1" id="r1"><label for="r1">1 - very sad</label>
> <input type="radio" name="q1" id="r2"><label for="r2">2</label>
> <input type="radio" name="q1" id="r3"><label for="r3">3</label>
> <input type="radio" name="q1" id="r4"><label for="r4">4 - neutral</label>
> <input type="radio" name="q1" id="r5"><label for="r5">5</label>
> <input type="radio" name="q1" id="r6"><label for="r6">6</label>
> <input type="radio" name="q1" id="r7"><label for="r7">7 - very
> happy</label>
>
> As I move through the radio buttons, I'd hear
>
> - "1 - very sad"
> - "2"
> - "3"
> - "4 - neutral"
> - "5"
> - "6"
> - "7 - very happy"
>
> I think I would get the gist that I'm listening to a scale and that very
> sad is 1 and neutral is 4 and that I have a few choices in between.
>
> Of course, you could certainly add (visually hidden) terms in the middle if
> you wanted.
> <input type="radio" name="q1" id="r5" aria-label="5 - a little happy">
> <input type="radio" name="q1" id="r6" aria-label="6 - happy">
>
>
> On Wed, Sep 5, 2018 at 9:08 AM Steve Green < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Radio buttons are definitely the right way to do this, with one to leave
>> a
>> question unanswered as you described. Use hidden labels for any radio
>> buttons that don't have visible ones.
>>
>> Steve Green
>> Managing Director
>> Test Partners Ltd
>>
>>
>>
> > > > >
From: glen walker
Date: Thu, Sep 06 2018 8:36AM
Subject: Re: Unlabelled radio buttons
← Previous message | Next message →
Then it depends if your questions can really be answered using a Likert
scale and have discrete answers, or if the answers can be continuous.
You'd have to decide that first. Does someone have to be 4-neutral or
3-a-lttle-sad, or can they be somewhere between those?
If the answer can be anywhere, then a slider would have to be used. I
guess all the answers would be initially neutral. But then you're back to
where you started and how do you unanswer a question. This starts getting
into the UX of the design as opposed to the accessibility of the design
(but, yes, I know the two are intertwined).
One idea is to have all your sliders on neutral and have a disabled "clear
answer" button next to each one. The button becomes enabled once the
slider value changes. If you select the button, it puts the slider back on
neutral (which is not the same as the user putting the slider back on
neutral) and then disables itself.
But then that adds another issue, selecting a button that disables itself.
Do you leave the focus on the disabled element and deal with the focus
indicator disappearing and the weirdness that you can tab off the disabled
element but can't tab back to it?
You could use a checkbox to clear the answer so you don't have to worry
about disabling it but that feels a little awkward. Is it a checkbox with
"clear answer" as the label, and when you check it, the slider moves back
to neutral? Then if you move the slider, the checkbox gets unchecked
automatically?
I think the enabled/disabled clear button indicates what happened better
than the checkbox does, despite the awkwardness of clicking on a button
that disables itself.
That's why I leave UX to people that know what they're doing :-)
Glen
From: Isabel Holdsworth
Date: Fri, Sep 07 2018 2:11AM
Subject: Re: Unlabelled radio buttons
← Previous message | No next message
Thanks Glen. Neutral is an answer in itself, so I think the slider
would have to be disabled for a question to remain unanswered.
For now we've managed to get agreement that all options should be
labelled. I think this will raise its ugly head again in the future,
in which case I'll make an argument for two different question types
with determinate and inexact answers, and will use a slider for the
inexact ones.
Cheers, Isabel
On 06/09/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Then it depends if your questions can really be answered using a Likert
> scale and have discrete answers, or if the answers can be continuous.
> You'd have to decide that first. Does someone have to be 4-neutral or
> 3-a-lttle-sad, or can they be somewhere between those?
>
> If the answer can be anywhere, then a slider would have to be used. I
> guess all the answers would be initially neutral. But then you're back to
> where you started and how do you unanswer a question. This starts getting
> into the UX of the design as opposed to the accessibility of the design
> (but, yes, I know the two are intertwined).
>
> One idea is to have all your sliders on neutral and have a disabled "clear
> answer" button next to each one. The button becomes enabled once the
> slider value changes. If you select the button, it puts the slider back on
> neutral (which is not the same as the user putting the slider back on
> neutral) and then disables itself.
>
> But then that adds another issue, selecting a button that disables itself.
> Do you leave the focus on the disabled element and deal with the focus
> indicator disappearing and the weirdness that you can tab off the disabled
> element but can't tab back to it?
>
> You could use a checkbox to clear the answer so you don't have to worry
> about disabling it but that feels a little awkward. Is it a checkbox with
> "clear answer" as the label, and when you check it, the slider moves back
> to neutral? Then if you move the slider, the checkbox gets unchecked
> automatically?
>
> I think the enabled/disabled clear button indicates what happened better
> than the checkbox does, despite the awkwardness of clicking on a button
> that disables itself.
>
> That's why I leave UX to people that know what they're doing :-)
>
> Glen
> > > > >