WebAIM - Web Accessibility In Mind

E-mail List Archives

Unlabelled radiobuttons

for

From: Isabel Holdsworth
Date: Sep 5, 2018 9:03AM

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