CSS Techniques (Techniques XML Submission Form)

 checkbox checked

Submission Results:

Technology: CSS Techniques 
Techniques Category: Visual formatting model and visual effects 
Submitter's Name: Becky Gibson 
Submitter's Email: gibsonb@us.ibm.com

<technique id="UNKNOWN">
<short-name>invisible labels for form elements</short-name>
<applies-to>
 <guideline idref="" />
 <success-criterion idref="UNKNOWN" />
</guideline

</applies-to>

<task>
<p>use 0 length sizing to hide labels for form controls which are not visually necessary</p>
</task>

<description>
While it is usually best to include visual labels for all form controls, there are situations where a visual label is not needed due to the surrounding textural description of the control and/or the content the control contains.  For example, text on the page indicates to "Enter birth date" followed by two combo boxes; one that contains a list of month numbers 1 - 12 and another containing a set of years.  To a visual user, it is obvious that the first control is used to enter the month and the second control the year.   Screen reader users, however, need each form control to be clearly labeled so the intent of the control is well understood when navigated to outside of the context of the surrounding text. To accomplish this, each form control must have an explicit label. The label can be made to not display by setting its height and width to 0.  This will prevent the label from being seen by sighted users but screen readers will speak the label even though it is not displaye
 d. Remember that the label will be displayed to all users if CSS is turned off in the browser. 

</description>

<user-issues>
 <affects group="UNKNOWN" />
</user-issues>

<eg-group>
<description>
The following combo boxes each have an explicit label identifying the purpose of the control.  The label is hidden by assigning the nosize style to each label.  The nosize style prevents the label from displaying by setting width:0, height:0, position:absolute; and overflow:hidden.  The screen readers will speak the hidden label that is explicitly associated with each combo box. 



Note that instead of using the nosize style described above, you could instead use postion:absolute; and left:-200px; to position the label "offscreen". This technique works with the screen readers as well.  Only position elements offscreen in the top or left direction, if you put an item off to the right or the bottom, many browsers will add scroll bars to allow the user to reach the content.   

</description>

<code><![CDATA[
<style type="text/css">

.nosize {

	position:absolute;

	width:0;

	height:0;

	overflow:hidden;

}

</style>





<p>

Enter name (first, middle, last):

<label for="firstName" class="nosize">Enter first name</label>

<input id="firstName" name="first" type="text" size="10" />

<label for="middleName" class="nosize">Enter middle name</label>

<input id="middleName" name="middle" type="text" size="10" />

<label for="lastName" class="nosize">Enter last name</label>

<input id="lastName" name="last" type="text" size="15" />

</p>
]]</code>

<ua-issues>
This technique was tested using Windows 2000 and Internet Explorer 6.0 sp1 with the following screen readers:

JAWS 4.51 and WindowEyes 4.5 sp3 both read the label when reading the page and when navigating from control to control.  WindowEyes will read the label twice when it is reading the page, once when it encounters the zero-sized label in the HTML stream and again when it speaks the control descriptions and associates the label with it. 

Home Page Reader 3.02 will read the label in item reading mode and in control reading mode. 
</ua-issues>
</eg-group>

<resources>
</resources>
</technique>

Additional Notes:

This technique is essentially the same as one recently submitted that uses display:none rather than positioning to hide the label. The description text are nearly identical since this is just a different way to accomplish the same results.

The screen reader results are a bit different - Home Page Reader works better with this technique than with display:none in items reading mode.

Received on Thursday, 30 September 2004 19:04:49 UTC