WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility problems with multiple labels for a radio button

for

From: Amanda Nance
Date: Aug 16, 2010 1:03PM

Allison,
Could you remove the table altogether and just use regular radio buttons?
You could combine the course title and course description as follows:

Which course title and course number would you like to use?
* Intro to French - FR 101
* Introductory Language - LANG 103
* French Composition in Connection with the Reading of World Literature -
COMP 106


On Wed, Aug 11, 2010 at 11:29 AM, Allison Bloodworth <
<EMAIL REMOVED> > wrote:

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