WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Unlabelled radiobuttons

for

Number of posts in this thread: 2 (In chronological order)

From: Isabel Holdsworth
Date: Wed, Sep 05 2018 9:03AM
Subject: Unlabelled radiobuttons
No previous message | Next message →

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: Jim Allan
Date: Wed, Sep 05 2018 12:37PM
Subject: Re: Unlabelled radiobuttons
← Previous message | No next message

I like the radiobutton solution. Rather than "clear answer" what about an
extra radio button of "no answer" then there is no javascript to mess with.

On Wed, Sep 5, 2018 at 10:03 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:

> 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
> > > > >


--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964