Web accessibility service pageWeb accessibility service page

12.4:H212103 Use field set and legend labels to distinguish between categories.

Improper design

The use of FIELDSET label to distinguish table form control, thus makes it impossible to distinguish the characteristics in the table form control list.

Improper design:

<FORM>
  <LEGEND>personal information</LEGEND>
    <LABEL for="lastname">lastname:</LABEL>
      <INPUT type="text" id="lastname" tabindex="1" value="enter lastname">
    <LABEL for="firstname">firstname:</LABEL> 
      <INPUT type="text" id="firstname" tabindex="2" value="enter firstname">
        <!--...more personal information...-->
  <LEGEND>personal medical record</LEGEND>
        <!--...personal medical record...-->
  </FORM>
          

Proper demonstration

Use FIELDSET label to distinguish form control item allows users to distinguish the difference easier.

Proper example:

<FORM>
  <FIELDSET>
    <LEGEND>personal information</LEGEND>
     <LABEL for="lastname">lastname:</LABEL> 
       <INPUT type="text" id="lastname" tabindex="1" value="enter lastname">
     <LABEL for="firstname">firstname:</LABEL> 
       <INPUT type="text" id="firstname" tabindex="2" value="enter firstname"> 
             <!--...more personal information...-->
 </FIELDSET>
 <FIELDSET>
   <LEGEND>personal medical record</LEGEND>
             <!--...personal medical record...-->
 </FIELDSET>
</FORM>
          
End of Main Content