WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility problems with multiple labels for a radio button

for

From: Jared Smith
Date: Aug 11, 2010 10:27AM

On Wed, Aug 11, 2010 at 9:29 AM, Allison Bloodworth wrote:

> The one problem I'm running into is that each radio button (the <input>)
> is associated with two labels--one for Course Title and one for Course
> Number. I've used the correct <label for="id of the input"> syntax on
> each label. This is validated by the HTML validator, but in an
> accessibility check from WAVE it reports: "Error: Multiple form labels. A
> form element has two labels associated with it."

Although assigning multiple labels to the same element is allowed via
standard HTML, this is flagged as an error in WAVE because it does not
actually provide accessibility. Only in JAWS 11 and IE are both labels
read. In all other combinations of JAWS, only the first label is
identified. In NVDA only the second label is identified.

WAVE also flags this as an error as it is very rare that multiple
labels are assigned correctly or intentionally. It usually indicates a
real mistake - typically a copy/paste error or multiple form controls
with the same id (which is not permissible in HTML).

Workaround #1:
Don't assign labels at all, but use the title attribute to provide the
necessary information.
<input type="radio" name="course_title" value="INTRO TO FRENCH"
title="Intro to French. FR 101.">

Workaround #2:
Assign one label to the form control but use hidden text
(http://webaim.org/techniques/css/invisiblecontent/) to provide the
necessary information.
<label for="p_INTRO_TO_FRENCH">INTRO TO FRENCH<span class="hidden"> FR
101</span></label>

Workaround #3:
Use aria-labelledby to assign both labels to the form control. This,
of course, would only work on systems that support ARIA.

Jared Smith
WebAIM