It was my comment during the techniques meeting that got the entry into the minutes that started this thread.  I was commenting on the technique of using a label with style="display:none" to label controls where a visual label was not desired.  I have since created a test file for several techniques of providing a non visual label for a form control.  The test file is attached and the results summarized for each screen reader below. The techniques tested were hiding the label using style="display:none", moving the label off screen using styles, using an single pixel image with alt text, and adding the title attribute to the control.   Each screen reader behaves a bit differently with the different techniques. I tested with WindowEyes 4.5 sp3, Home Page Reader 3.04 (which is in beta within IBM), and Jaws 4.51. My test page uses <select> and <input> elements as examples of controls.

Technique one - hiding the label with style="display:none"
WindowEyes  and Jaws both read the label even though it is hidden.  They  read the label when reading the contents of the page and also read the label when you navigate from control to control.
Home Page reader does not read the label in item reading mode.   It does read the label in control reading mode.

Technique two - hiding the label by moving it off screen using styles. I used two different style techniques for this:
.offscreen {
        position:absolute;
        width:0px;
        overflow:hidden;
}
.offscreen2 {
        position:absolute;
        left:-200em;
}

WindowEyes  reads the label twice when reading the contents of the page.  It reads the label as it appears in the HTML stream, and it reads the label with the control it is associated with.   When navigating from control to control it reads the label with the control.
Jaws reads the label in normal reading mode and when navigating from control to control. Unlike WindowEyes, Jaws only reads the control once in normal reading mode - in other words, it respects the positioning of the label off screen when reading the page.
Home Page reader does read the label in item reading mode.  It does  read the label in control reading mode.


Technique Three - using a transparent, single pixel image in front of the control with the label text specified in the alt attribute.
WindowEyes  reads the alt text of the image in normal reading mode. However, if you navigate directly to the control there is no label information announced. If you navigate directly to the control With MSAA mode off, WindowEyes picks up the visual text before the control and reads it. This is only an issue in the image example since WindowEyes still reads the label and title information if it is available as you navigate from control to control with MSAA mode both off and on.
Jaws reads the alt text in normal reading mode and when navigating from control to control.
Home Page Reader reads the alt text in item reading mode when the image is before an <input> field.  It does not read the alt text when the image is directly before
a <select> tag.  In control reading mode it behaves the same, it does not read the alt text for an image before a <select> but it does read the alt text before an <input>.

Technique Four - using the title attribute on the control.
WindowEyes and Jaws both read the title in normal reading mode and when navigating from control to control.  
Home Page Reader, however, does not read the title when navigating in item reading mode but it does read it in control reading mode.  

Can we draw any conclusions from all of this?  I'm not sure.  There are issues with each of the techniques.  If using the CSS techniques the labels will be visually displayed if the user turns off css.   Also, with the image technique, the broken image will be displayed (in IE) if images are turned off.  Both of these issues can disturb a carefully laid out visual presentation.  Use of the title attribute seems to be the most reliable method of labeling a form control in a non visual manner.  The only screen reader it doesn't work fully with is Home Page reader in item reading mode.  Is this the technique the WCAG should recommend or should we present them all and explain the caveats of each?

I have attached my test file and the single image gif which is referenced in the test file.



-becky

Becky Gibson
Web Accessibility Architect
                                                     
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com