RE: [Techs] CSS and invisible labels for forms

Becky Gibson wrote:
<blockquote>
Technique one - hiding the label with style="display:none"
....
Home Page reader does not 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.
...
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.
...
Home Page Reader, however, does not read the title when navigating in
item reading mode but it does read it in control reading mode.

</blockquote>
 
John replies:
I agree with the conclusion that using the title attribute is the most
reliable technique across the board. It would be good to find out how
HAL (Dolphin's screen reader) handles this.
 
Since Home Page Reader 3.04 is in beta within IBM, could you recommend
to the developers that they make sure HPR reads all the labels in items
mode as well as controls mode? Seems like this is the time to fix it.
Also, just for grins, here's a link to an example that uses <fieldset>
and <legend> to group and identify three pulldown menus; each pulldown
(<select> has a title attribute that doesn't appear on screen. For each
one, JAWS reads the legend and the title (e.g., "[legend]Schedule your
event [title]date" "[legend] Schedule your event [title]month",
"[legend]Schedule your event [title]year."
 
http://www.utexas.edu/research/accessibility/resource/how_to/form/pulldo
wn_gp/pulldown_gp.html
 
 
John

"Good design is accessible design." 
John Slatin, Ph.D.
Director, Accessibility Institute
University of Texas at Austin
FAC 248C
1 University Station G9600
Austin, TX 78712
ph 512-495-4288, f 512-495-4524
email jslatin@mail.utexas.edu
web http://www.utexas.edu/research/accessibility/
<http://www.utexas.edu/research/accessibility/> 


 

	-----Original Message-----
	From: w3c-wai-gl-request@w3.org
[mailto:w3c-wai-gl-request@w3.org] On Behalf Of
Becky_Gibson@notesdev.ibm.com
	Sent: Friday, September 03, 2004 10:39 am
	To: w3c-wai-gl@w3.org
	Subject: RE: [Techs] CSS and invisible labels for forms
	
	

	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 <mailto:gibsonb@us.ibm.com>