WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Unlabelled radio buttons

for

From: glen walker
Date: Sep 5, 2018 12:37PM

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