E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Allison Bloodworth
Date: Wed, Aug 11 2010 9:30AM
Subject: Accessibility problems with multiple labels for a radio button
No previous message | Next message →

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 ADDRESS REMOVED =
510-289-6627

From: Jared Smith
Date: Wed, Aug 11 2010 10:27AM
Subject: Re: Accessibility problems with multiple labels for a radio button
← Previous message | Next message →

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

From: Amanda Nance
Date: Mon, Aug 16 2010 1:03PM
Subject: Re: Accessibility problems with multiple labels for a radio button
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> 510-289-6627
>
>
>
>
>
>
>

From: Allison Bloodworth
Date: Wed, Aug 18 2010 7:18PM
Subject: Re: Accessibility problems with multiple labels for a radio button
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED =
>> 510-289-6627
>>
>>
>>
>>
>>
>>
>>