<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: Add explicit labels to form controls</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">Add explicit labels to form controls</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">WAI / WCAG 1.0 Priority 2 checkpoint 12.4</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  <p>
                     The page contains a form whose controls are not explicitly linked
                     to LABEL elements.
                     
                  </p>
                  
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to fix</b>
                  
                  
                  <p>
                     There are three steps for associating a label to a control:
                     
                  </p>
                  
                  
                  <ol>
                     
                     
                     <li>assign a unique identifier to the control using the
                        <strong>ID</strong> attribute;
                     </li> 
                     
                     
                     <li>create a <strong>LABEL</strong> element containing the
                        text or image label to
                        associate to the control;
                     </li> 
                     
                     
                     <li>add the <strong>FOR</strong> attribute to the LABEL element with the
                        control's ID as value.
                     </li> 
                     
                     
                  </ol>
                  
                  	 
                  <p>Example:</p>
                  <pre>
&lt;form action="submit" method="post"&gt;
   &lt;label for="firstname"&gt;First name: &lt;/label&gt;
   &lt;input type="text" id="firstname"&gt;
   &lt;label for="lastname"&gt;Last name: &lt;/label&gt;
   &lt;input type="text" id="lastname"&gt;
&lt;/form&gt;
</pre>
                  
                  </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  
                  <p>
                     When navigating through a form using the tab key, a visually enabled
                     user can easily associate the controls with the labels that are
                     placed near them. For a screen reader user, however, this
                     information is not enough.  It is necessary to explicitly specify which
                     label is linked to which form control.
                     
                  </p>
                  
                  
                  <p>
                     The best way to achieve this is provided by the <strong>LABEL</strong>
                     element. LABEL must contain the actual text labeling, the form
                     control, and its attribute <strong>FOR</strong> must contain the
                     <strong>ID</strong> of the control.
                     
                  </p>
                  
                  
                  <p>
                     One LABEL can point only to one control, or more than one LABEL can
                     point to the same control. This feature is not yet implemented by all
                     screen readers, so it is recommended to assign only one LABEL
                     to each control.
                     
                  </p>
                  
                  
                  <p>
                     It is possible to implicitly associate a label to a control: 
                     insert both the label and the control as contents of the LABEL
                     element. While this technique is suggested by HTML 4.01
                     Recommendation, it is not supported by all screen readers yet.
                     
                  </p>
                  
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>