WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Label for a set of radio buttons

for

From: Tony Olivero
Date: Jun 10, 2013 3:18PM

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.

<!-- CSS for off screen text -->
.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 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
> > > >