E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Label for a set of radio buttons

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

From: Dave Merrill
Date: Mon, Jun 10 2013 2:57PM
Subject: Label for a set of radio buttons
No previous message | Next message →

Basic question: From an accessibility point of view, how are you supposed
to label a set of radio buttons? The 'for' attribute of a <label> tag has
to point to a single control (not a fieldset), and label tags can surround
only one field (not to mention the fact that the label isn't always
adjacent to the actual field).

One answer is a separate label for each radio, which in some sense you need
anyway to explain it, but how then do you tie them together, and to the
question being asked?

What's the best practice approach so assistive technologies understand this
situation?

Thanks,

--
Dave Merrill

From: Jukka K. Korpela
Date: Mon, Jun 10 2013 3:08PM
Subject: Re: Label for a set of radio buttons
← Previous message | Next message →

2013-06-10 23:57, Dave Merrill wrote:

> From an accessibility point of view, how are you supposed
> to label a set of radio buttons?

You aren't.

> The 'for' attribute of a <label> tag has
> to point to a single control (not a fieldset),

Exactly.

> and label tags can surround
> only one field (not to mention the fact that the label isn't always
> adjacent to the actual field).

A label element can be associated with a single control (input field).

> One answer is a separate label for each radio, which in some sense you need
> anyway to explain it,

Yes, and that's what the label element is for.

> but how then do you tie them together, and to the
> question being asked?

Any way you like, or no way. Normally, when there is a question followed
by alternative answers, the situation is pretty clear. You can wrap the
radio buttons inside a fieldset element, and use the legend element for
it. You could put the question in the legend, or make it a heading
element, or just a paragraph (p element). But this has no crucial
impact, and it has nothing to do with labelling things.

Yucca

From: Tony Olivero
Date: Mon, Jun 10 2013 3:18PM
Subject: Re: Label for a set of radio buttons
← Previous message | Next message →

There are actually three approaches that could be taken. To address
the label questoin, you should associate a text label with each radio
button. Now, for how to associate the radio butotn to the questoin
being asked:

1. fieldset/legend pair. This is probably the most HTML
consistent/technology agnostic solution. It does have the drawback of
causing the question to be repeated every time a user moves to a new
radio button with certain AT products.

<fieldset>
<legend>The flag of the United States contains the colors Red, White,
and ___?</legend>
<input type="radio" name="flag" id="flag_green" value="green" />
<label for="flag_green">Green</label><br/>
<input type="radio" name="flag" id="flag_orange" value="orange"
/><label for="flag_orange">Orange</label><br />
<input type="radio" name="flag" id="flag_blue" value="blue" /><label
for="flag_blue">Blue</label><br/>
</fieldset>

2. Hidden text. You can use off-screen text to indicate the question
being asked as part of the first radio button's label.


.offscreenLabel {
position: absolute;
margin-top: -500px;
width: 0px;
height: 0px;
overflow: hidden;
}

<p>The flag of the United States contains the colors Red, White, and ___?</p>
<input type="radio" name="flag" id="flag_green" value="green" />
<label for="flag_green"> <span class="offscreenLabel">The flag of the
United States contains the colors Red, White, and ____?</span>
Green</label><br/>
<input type="radio" name="flag" id="flag_orange" value="orange"
/><label for="flag_orange">Orange</label><br />
<input type="radio" name="flag" id="flag_blue" value="blue" /><label
for="flag_blue">Blue</label><br/>

3. Aria labelled by. By giving the heading (or whatever element)
containing the question an id, you can label the first radio button
with the label of the question and the answer choice.

<p id="flag_question">The flag of the United States contains the
colors Red, White, and ___?</p>
<input type="radio" name="flag" id="flag_green" value="green"
aria-labelledby="flag_question flag_green_lbl" /> <label
for="flag_green" id="flag_green_lb">Green</label><br/>
<input type="radio" name="flag" id="flag_orange" value="orange"
/><label for="flag_orange">Orange</label><br />
<input type="radio" name="flag" id="flag_blue" value="blue" /><label
for="flag_blue">Blue</label><br/>

You'll probably get a number of reasons why each approach is better.
It often will depend on your userbase, what browsers you intend to
support (as some older ones might not support the ARIA spec fully) and
your coding standard. At the moment, I believe the middle solution
covers the bases as far as being less verbally redundant, and AT
inclusive. However, the ARIA solution is likely the way you will want
to go in the future.

Hope tis heelps.

Tony

On 6/10/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> Basic question: From an accessibility point of view, how are you supposed
> to label a set of radio buttons? The 'for' attribute of a <label> tag has
> to point to a single control (not a fieldset), and label tags can surround
> only one field (not to mention the fact that the label isn't always
> adjacent to the actual field).
>
> One answer is a separate label for each radio, which in some sense you need
> anyway to explain it, but how then do you tie them together, and to the
> question being asked?
>
> What's the best practice approach so assistive technologies understand this
> situation?
>
> Thanks,
>
> --
> Dave Merrill
> > > >

From: Dave Merrill
Date: Mon, Jun 10 2013 3:20PM
Subject: Re: Label for a set of radio buttons
← Previous message | Next message →

"You could put the question in the legend, or make it a heading
element, or just a paragraph (p element). But this has no crucial
impact, and it has nothing to do with labelling things."

Hmmm, don't know that I buy that. A disembodied radio with a clearly
labeled value means nothing without the question it's an answer to. If AT
users are supposed to link them based on context, fine, just trying to
confirm that that's the state of the art.

On Mon, Jun 10, 2013 at 5:08 PM, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = >wrote:

> 2013-06-10 23:57, Dave Merrill wrote:
>
> > From an accessibility point of view, how are you supposed
> > to label a set of radio buttons?
>
> You aren't.
>
> > The 'for' attribute of a <label> tag has
> > to point to a single control (not a fieldset),
>
> Exactly.
>
> > and label tags can surround
> > only one field (not to mention the fact that the label isn't always
> > adjacent to the actual field).
>
> A label element can be associated with a single control (input field).
>
> > One answer is a separate label for each radio, which in some sense you
> need
> > anyway to explain it,
>
> Yes, and that's what the label element is for.
>
> > but how then do you tie them together, and to the
> > question being asked?
>
> Any way you like, or no way. Normally, when there is a question followed
> by alternative answers, the situation is pretty clear. You can wrap the
> radio buttons inside a fieldset element, and use the legend element for
> it. You could put the question in the legend, or make it a heading
> element, or just a paragraph (p element). But this has no crucial
> impact, and it has nothing to do with labelling things.
>
> Yucca
>
> > > >

--
Dave Merrill

From: Tony Olivero
Date: Mon, Jun 10 2013 3:25PM
Subject: Re: Label for a set of radio buttons
← Previous message | Next message →

I think it's going to depend on the user. A speech/Braille output user
tabbing through a form won't necessarily link the question if it's not
symantically tied to the radio button group. If you want to make your
heading/paragraph keyboard focusable, that's one option too, but adds
a tab stop for keyboard users that might not be necessary.

I disagree with the assertion that the question can be disembodied
from the answer choices.

Tony

On 6/10/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> "You could put the question in the legend, or make it a heading
> element, or just a paragraph (p element). But this has no crucial
> impact, and it has nothing to do with labelling things."
>
> Hmmm, don't know that I buy that. A disembodied radio with a clearly
> labeled value means nothing without the question it's an answer to. If AT
> users are supposed to link them based on context, fine, just trying to
> confirm that that's the state of the art.
>
>
> On Mon, Jun 10, 2013 at 5:08 PM, Jukka K. Korpela
> < = EMAIL ADDRESS REMOVED = >wrote:
>
>> 2013-06-10 23:57, Dave Merrill wrote:
>>
>> > From an accessibility point of view, how are you supposed
>> > to label a set of radio buttons?
>>
>> You aren't.
>>
>> > The 'for' attribute of a <label> tag has
>> > to point to a single control (not a fieldset),
>>
>> Exactly.
>>
>> > and label tags can surround
>> > only one field (not to mention the fact that the label isn't always
>> > adjacent to the actual field).
>>
>> A label element can be associated with a single control (input field).
>>
>> > One answer is a separate label for each radio, which in some sense you
>> need
>> > anyway to explain it,
>>
>> Yes, and that's what the label element is for.
>>
>> > but how then do you tie them together, and to the
>> > question being asked?
>>
>> Any way you like, or no way. Normally, when there is a question followed
>> by alternative answers, the situation is pretty clear. You can wrap the
>> radio buttons inside a fieldset element, and use the legend element for
>> it. You could put the question in the legend, or make it a heading
>> element, or just a paragraph (p element). But this has no crucial
>> impact, and it has nothing to do with labelling things.
>>
>> Yucca
>>
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > > >

From: Jukka K. Korpela
Date: Tue, Jun 11 2013 3:08AM
Subject: Re: Label for a set of radio buttons
← Previous message | No next message

2013-06-11 0:20, Dave Merrill wrote:

> "You could put the question in the legend, or make it a heading
> element, or just a paragraph (p element). But this has no crucial
> impact, and it has nothing to do with labelling things."
>
> Hmmm, don't know that I buy that. A disembodied radio with a clearly
> labeled value means nothing without the question it's an answer to.

The question of course precedes the control(s) for answering it.
Anything else would be thoroughly confusing, even absurd.

> If AT
> users are supposed to link them based on context, fine, just trying to
> confirm that that's the state of the art.

Everyone is supposed to read the question before considering the options
for answers. We cannot really cover all the odd things that people might
do when filling out a formal; it is sufficiently challenging to make
normal, sequential filling accessible and usable.

Yucca