Quiz 5.2.14: Speaking form labels - 2
Part 2…
In part 1 we hid form labels using display:none and found that some screen readers treat display:none on form labels differently than they treat display:none on other elements. Sigh…
Intent on hiding the form labels (again I disagree with the premise) another technique uses the title attribute on the form control and does not use any label element at all.
We have already learned that the default verbosity settings in some screen readers keeps them from speaking title attributes. The user has to turn them on, if they ever learn the setting exists. However, it seems some screen readers automatically speak titles for form labels. Another inconsistency?
Our test case has two select controls, each holding a hidden label in their title attributes. For comparison purposes, the test case also has an image with the image description in both the ALT attribute and title attribute. Which titles are spoken? (Test case updated to add both alt and title text 9/4/2005)
As always, please try the test case in as many screen readers as possible and let us know what you hear.
September 1st, 2005 at 4:14 pm
HPR 3.04
In straight through reading mode, HPR does NOT speak the title attributes on the form fields. In controls reading mode, it DOES speak the title attributes on the form fields.
In both modes, it DOES speak the title attribute on the image.
September 2nd, 2005 at 6:21 am
To hide the form label (agree, I would tend to disagree with the premise), why not use the off-top technique? This technique is useful for ‘hiding’ anything, but ensuring screen readers will still read it. It is useful for headings that can be hidden away for visual purposes, but are useful for other users.
See the following for the off-top technique
http://www.webaim.org/techniques/articles/hiddentext
Note they mention somewhere that it has a few advantages over the ‘off-left’ technique.
Disable CSS on the tesco.com home page to see it in action by the navigation stuff at the top (the home page doesn’t technically validate last time I checked, but they are getting better!) http://www.tesco.com
September 3rd, 2005 at 5:00 pm
Anup, You’re right. There are lots of other ways to hide the label, and we’ve covered them in earlier testing. Off top and off left will work very well.
The point of these tests was to draw attention to the inconsistencies in how screen readers behave with certain attributes. They will not speak certain display:none elements, but will speak other display:none elements. They will not speak titles in some cases, but will speak them in other. How are developers to know, understand, or remember the inconsistencies?
September 4th, 2005 at 4:54 pm
Updated test case with HPR 3.04.
When in straight through reading mode, HPR does not speak the titles on the select controls. Reading the form in controls reading mode DOES speak the titles on the select controls.
For the image, the ALT text is read if it exists and the title is not. When the ALT is missing and title exists, the title is read.
Listen to a recording of straight through reading mode.
Listen to a recording of controls reading mode.
September 4th, 2005 at 5:17 pm
JAWS 6.1 with IE 6
Straight through reading mode and form reading mode both speak the titles for the select controls.
The title for the image is not spoken when ALT text is available for the image. When no ALT text is available the title is spoken.
Listen to a recording.
September 4th, 2005 at 5:28 pm
Window Eyes 5.0 with IE 6
Straight through reading mode and form reading mode both speak the titles for select controls.
The title text for the image IS spoken even when ALT text also exists. This is different than either HPR or JAWS. They both give preference to the ALT text.
Listen to a recording.
September 5th, 2005 at 8:58 am
Bob,
Thanks for the clarification. Fair enough. I guess my comment was a bit ahead of the conclusions then, as a sort of ‘given all these problems with screen readers, this is one way you can do it’ type of answer.
Anup
January 15th, 2009 at 11:54 pm
Jaws 10 with IE 6. Same behaviour for the combobox labels as for test 5.2.13 (hidden labels read). The alt image description was read, which is the default. Changing graphics verbosity to read title has the hidden title text read instead.