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 display:none 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.  A non-visual label can be provided by setting the style of the label to display:none. This will prevent the label from being seen by sighted users but screen readers will speak the label even though it is n
 ot displayed. 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 nodisplay style to each label.  The nodisplay style prevents the label from displaying by setting display:none.  The screen readers will speak the hidden label that is explicitly associated with each combo box.  

</description>

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

.nodisplay {

   display:none;

}

</style>





<div>Enter month and year of membership expiration:

<label for="month" class="nodisplay">Select month membership expires.</label>

<select id="month">

<option value="1">01</option>

<option value="2">02</option>

<option value="3">03</option>

<option value="4">04</option>

<option value="5">05</option>

<option value="6">06</option>

<option value="7">07</option>

<option value="8">08</option>

<option value="9">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>

<label for="year" class="nodisplay">Select year membership expires.</label>

<select id="year">

<option value="2004">2004</option>

<option value="2005">2005</option>

<option value="2006">2006</option>

</select>

</div>
]]</code>

<ua-issues>
This technique was tested in the following screen readers in Windows 2000 and IE 6 sp 1:

JAWS 4.51 and WindowEyes 4.5 sp3 both speak 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 hidden label in the HTML stream and again when it speaks the control descriptions and associates the label with it. 

Home Page Reader 3.02 does not speak the label in item reading mode but it does speak the hidden label in controls reading mode.
</ua-issues>
</eg-group>

<resources>
</resources>
</technique>

Additional Notes:

Note that the description of this technique and the code is VERY similar to the HTML technique for using a clear pixel image and alt text for the label that I submitted.  Is that okay or do I need to create a different scenario for the CSS version?

Received on Thursday, 30 September 2004 18:32:49 UTC