Internal USGS Access Only

Building an Accessible Form

Associate Prompts with Form Fields

Your can use either of the following methods:

• Place your prompt immediately before or after the field.
• Use LABEL and ID attributes to associate each description with it's field.

  <table border="0" cellspacing="0" cellpadding="4">
  <tr bgcolor="#CCCCCC">
    <td> <label for="fname">First Name</label> </td>
    <td> <input id="fname" type="text" name="name-first" size="12"> </td>
  </tr>
  <tr bgcolor="#DDDDDD">
    <td> <label for="lname">Last Name</label> </td>
    <td> <input id="lname" type="text" name="name-last"> </td>
  </tr>
</table>

  First Name
  Last Name

Use FIELDSET with a LEGEND to group Radio Buttons, or Check Boxes, which have the same NAME

<fieldset>
  <legend>Choose a fish</legend>
  <input id="redFish" type="radio" name="color" value="red">
  <label for="redFish">red fish</label><br>
  <input id="blueFish" type="radio" name="color" value="blue">
  <label for="blueFish">blue fish</label>
</fieldset>


Choose a fish

red fish
blue fish

Note that LABEL and ID tags are still needed, as above. Labels and IDs are case-sensitive.

For mor examples see WebAim's "How to Create Accessible Forms" and Jim Thatcher's Accessible Forms.

slide 38

"Mastering a Web Site" online course Created and maintained by Lorna Schmid and David Boldt. http://water.usgs.gov/usgs/training/webmaster/accessible_form.html     Last modified: Mon Nov 7 11:05:35 EST 2005