WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessibility problems with multiple labels for a radio button

for

From: Allison Bloodworth
Date: Aug 11, 2010 9:30AM

Hi folks,

I have a question I'm hoping someone on the list can answer. I'm working on an application for faculty at UC Berkeley to enter their achievements, which are then used as the basis for their performance reviews. On one screen we receive data on courses they've taught, and they can enter data into a form to add comments, an alternate course title, and determine which Course Title/Course Number displays in their review document.

To this end, I created a table with radio buttons in the first column, Course Title in the second column, and Course Number in the third column: http://allison.media.berkeley.edu/APBearsEditCourseTaught4.html. (Note that this form looks kind of funny right now as there is a lot of inline help text being displayed that will be hidden by javascript until the user clicks the (?) icons.) This is tabular data and I've added a table summary and scope="row" or scope="column" as appropriate so I think this table should be quite accessible.

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

Yes, that's true, but that is because it needs two labels, and I'm not sure how else to structure it. I found this article on multiple form labels and screen readers:http://www.456bereastreet.com/archive/200809/multiple_form_labels_and_screen_readers/ which is talking about a slightly different problem (alerting screen reader users of errors) and suggesting that multiple form labels might solve that problem--but that they aren't supported by the majority of screen readers.

Has anyone else ever run into this problem before, or have any advice?

Cheers,
Allison

Allison Bloodworth
Senior User Interaction Designer
Educational Technology Services
University of California, Berkeley
<EMAIL REMOVED>
510-289-6627