WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility problems with multiple labels for a radio button

for

From: Allison Bloodworth
Date: Aug 18, 2010 7:18PM

Hi folks,

Thanks very much for this suggestion Amanda (and thank you Jared for the solutions!). We thought about this, but needed to make sure the fields were both labeled clearly, and that at a glance it was easy to scan and see each value. Thus, we went for the table approach.

In terms of Jared's suggested solutions, I am thinking of going with a combination of #2 & #3. I'd really like to try to keep both the labels as I feel like that is the proper, semantic HTML to use--even the HTML validator recognizes it.

Option 1) I'm wondering if I can use labels along with the title attribute--I'm guessing if I do that only one label will be read *instead of* the title attribute (assuming screen readers read the title when there is no label). I think it might also be weird to have a tooltip display that says information that is also on the screen, so this option isn't that attractive.
Option 2) I'm not sure how well this would work if I keep both the labels, as according to the article I read I can't be sure which label the screen reader would read. However, I *could* add the hidden text to both labels.
Option 3) I'm not sure how many screen readers have ARIA support so I'm not sure how to evaluate this one.

Cheers,
Allison

On Aug 16, 2010, at 12:01 PM, Amanda Nance wrote:

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