(X)HTML Techniques (Techniques XML Submission Form)

 checkbox checked

Submission Results:

Technology: (X)HTML Techniques 
Techniques Category: Forms 
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 clear, single  pixel image with alt text to label form controls in a non-visual manner</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 using a clear, single pixel image with alt text as the label content.  

</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 created using a single pixel, clear gif image with alt text which identifies the control.  A screen reader will speak the alt text of the image as the label for the control.

</description>

<code><![CDATA[
<div>Enter month and year of membership expiration:

<label for="month3"><img src="clearPixel.gif" alt="Select month membership expires." /></label><select id="month3">

<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="year3"><img src="clearPixel.gif" alt="Select year membership expires." /></label>

<select id="year3">

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

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

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

</select>

</div>
]]</code>

<ua-issues>
This technique was tested with the following screen readers using Internet Explorer 6.0 SP1 in Windows 2000.

JAWS 4.51 reads the alt text as the label for the control in normal reading mode and when navigating from control to control. 

Home Page Reader 3.02 reads the alt text with the control when in item reading mode and control reading mode.

WindowEyes 4.51 sp3 reads the alt text in normal reading mode. It does not read the image alt text as the label for the control when navigating from control to control with MSAA mode on. When navigating from control to control using tab with MSAA mode off, WindowEyes reads the text in front of the control as the label for the control but does not read the image alt text. 
</ua-issues>
</eg-group>

<resources>
</resources>
</technique>

Additional Notes:

Received on Wednesday, 29 September 2004 19:25:22 UTC