Quiz 5.2.15: Speaking form labels - 3
Speaking of labels on form controls, Patrick Lauke brought up an interesting question. The spec for labels says “More than one LABEL may be associated with the same control by creating multiple references via the for attribute.” There are all sorts of questions that come to mind. First of course is simply “Why?” Then, what would it look like? Are all labels displayed? For screen readers, what does it sound like? Are all labels spoken? In what sequence?
Tell us why you might use multiple labels and what you think will happen.
In the mean time, I’ve created a contrived test case that offers one possibility. It will be very interesting to see what it does in various browsers and screen readers. Please try the test case and let us know what happens.
September 5th, 2005 at 1:15 pm
I’ve found this useful before in the case of form validation. When submitted data does not validate, I return the (pre-filled) form with a summary of errors at the top. Relevant sections of that summary are linked to their respective fields in the form using a secondary label. Unfortunately I can’t think of any publicly-accessible sites using that code at the moment.
I think it should improve accessibility… perhaps screen-reader users won’t have to skip through the form once they reach the error message? I haven’t tested it, so I can’t be sure.
September 5th, 2005 at 4:14 pm
Excellent! Thanks for pointing out that technique. We have all seen the results many times. I’ve never thought to see how they were done. Good tip!
September 6th, 2005 at 8:48 am
Browser: Firefox 1.0.6/Windows 2000
Language: en
Labels displayed: 4
Behaviour: Any click on any given label focuses the text box
Browser: Opera 8.01/Windows 2000
Language, labels and behaviour identical to Firefox
Browser: IE6 SP1/Windows 2000
Language: fr
Labels and behaviour identical to both browsers above
September 6th, 2005 at 9:29 am
Windows XP
Firefox 1.0.6 and Fire Vox 3.0
Language: en
4 labels displayed
4 labels read
Opera 8.0.2
Language: en
4 labels displayed
4 labels read
IE6 SP2/Windows XP
Language: en
4 labels displayed
For all: clicking on any one of the labels focuses the text box.
September 8th, 2005 at 5:41 pm
still no actual screenreader results…anybody?
September 9th, 2005 at 6:17 am
MSIE v6.0sp1, jfw 6.2, default lang=en - displayed 4 - spoken 1. spoken label was the =fr label which is the last in code order. jfw field info (keystroke jfw key, shift, f1) “Tag INPUT has 1 parameters, id=name, Tag FORM has 1 parameters,
action=none”
September 9th, 2005 at 6:24 am
msie6sp1 jfw5.0 default lang=en - as with jfw 6.2, displayed 4, spoken 1 =fr.
September 9th, 2005 at 6:39 am
MSIE6.0sp1, supernova 6.5, default lang=en, displayed 4, spoken 4.
September 9th, 2005 at 6:44 pm
Jaws 6.1 and IE6 straight through, virtual cursor on.
All 4 labels are displayed.
Only one is read, the last. The simple label Nom: is read as “nom du pla edit” (excuse my poor French).
Listen to a recording.
September 9th, 2005 at 6:52 pm
Jaws 6.1 and IE6, virtual cursor off
All 4 labels are displayed.
In this mode, one tabs from link to link. Tabbing into the input field produces a different result from straight through. It speaks the first label: “Name colon edit.”
Listen to a recording.
September 9th, 2005 at 7:15 pm
Jaws 6.1 and IE6, forms/controls reading mode.
All 4 labels are displayed.
This mode places the cursor in the edit field (as with virtual cursor off), but speaks the last label.
Inconsistent? Two modes speak the last label. Another speaks the first.
Listen to a recording.
September 9th, 2005 at 7:33 pm
IBM Home Page Reader 3.04, straight through reading mode
All four labels are displayed.
All four labels are spoken.
Listen to a recording.
September 9th, 2005 at 7:35 pm
IBM Home Page Reader 3.04, forms reading mode
All four labels are displayed.
In this mode, the tab key is used to move from link to link and into the form. Alternately, pressing
“Enter” places the page in forms reading mode and “F” is used to move from control to control. All four labels are spoken as the cursor is placed into the input field.
Listen to a recording.
September 9th, 2005 at 7:51 pm
Window Eyes 5.0 and IE6, straight through reading mode
All four labels are displayed.
All four labels are spoken. The last label is repeated as the cursor passes through the input field.
Listen to a recording.
September 9th, 2005 at 7:54 pm
Window Eyes 5.0 and IE6, forms reading mode
All four labels are displayed.
In this mode, I used the tab key to move from link to link, then escaped and used “F” for form. All four labels were read and then the last label repeated as the cursor was placed into the input field.
Listen to a recording.
September 9th, 2005 at 8:01 pm
The most practical use for this feature is the one proposed by Owen Rodda in the first comment. He suggested using additional labels to return the error text after form validation. i.e. “You missed telling us your phone number.”
That technique will work fine in most cases. Jaws is the one that varies, but in two thirds of my trials Jaws reads the last label and therefore will read the error text from Owen’s scenario.
September 10th, 2005 at 4:27 pm
[…] Access Matters Seeking Best Practices Previously: Quiz 5.2.15: Speaking form labels - 3 […]
August 7th, 2006 at 1:20 am
Another use I have found is I have a table with many columns and I have each column’s value be a label for the checkbox for that row so clicking on any text in that row selects the checkbox. All of those labels come AFTER the checkbox though, does JAWS then read the first (the closest to the checkbox) or the last (because it is the last parsed label)? For me I would prefer reading the first or all (all would be best).