Part 4. Accessibility

Building a simple accessible form

No accessible markup

In this example, the form is marked up with paragraphs, and presentational elements like <br> and <strong>.

<form action="#" method="get">
   <p>
      <strong>Personal Details</strong><br>
      Name:
      <input type="text" name="details-name" size="15">
      Phone Home:
      <input type="text" name="details-phone" size="15">
   </p>
   <p>
      <strong>Select the fact sheets you want</strong><br>
      <input type="checkbox" name="roses" value="checkbox">
      Roses
      <input type="checkbox" name="daffodils" value="checkbox">
      Daffodils
      <input type="checkbox" name="tulips" value="checkbox">
      Tulips
   </p>
</form>

Personal Details
Name: Phone Home:

Select the fact sheets you want
Roses Daffodils Tulips

Step 1 - grouping form information using Fieldsets and legends

<form action="#" method="get">
   <fieldset>
      <strong>Personal Details</strong><br>
      Name:
      <input type="text" name="details-name" size="15">
      Phone Home:
      <input type="text" name="details-phone" size="15">
   </fieldset>
   <fieldset>
      <strong>Select the fact sheets you want</strong><br>
      <input type="checkbox" name="roses" value="checkbox">
      <label>Roses</label>
      <input type="checkbox" name="daffodils" value="checkbox">
      <label>Daffodils</label>
      <input type="checkbox" name="tulips" value="checkbox">
      <label>Tulips</label>
   </fieldset>
</form>
Personal Details
Name: Phone Home:
Select the fact sheets you want

Step 2 - labelling groups using legends

<form action="#" method="get">
   <fieldset>
      <legend>Personal Details</legend>
      Name:
      <input type="text" name="details-name" size="15">
      Phone Home:
      <input type="text" name="details-phone" size="15">
   </fieldset>
   <fieldset>
      <legend>Select the fact sheets you want</legend>
      <input type="checkbox" name="roses" value="checkbox">
      Roses
      <input type="checkbox" name="daffodils" value="checkbox">
      Daffodils
      <input type="checkbox" name="tulips" value="checkbox">
      Tulips
   </fieldset>
</form>
Personal Details Name: Phone Home:
Select the fact sheets you want Roses Daffodils Tulips

Step 3 - tying a text label to a specific form input using "label for" and "id"

<form action="#" method="get">
   <fieldset>
      <legend>Personal Details</legend>
      <label for="details-name">Name:</label>
      <input id="details-name" type="text" name="details-name" size="15">
      <label for="details-phone">Phone Home:</label>
      <input id="details-phone" type="text" name="details-phone" size="15">
      </fieldset>
   <fieldset>
   <legend>Select the fact sheets you want</legend>
      <input id="roses" type="checkbox" name="roses" value="checkbox">
      <label for="roses">Roses</label>
      <input id="daffodils" type="checkbox" name="daffodils" value="checkbox">
      <label for="daffodils">Daffodils</label>
      <input id="tulips" type="checkbox" name="tulips" value="checkbox">
      <label for="tulips">Tulips</label>
   </fieldset>
</form>
Personal Details
Select the fact sheets you want

Step 4 - adding titles

<form action="#" method="get">
   <fieldset>
      <legend>Personal Details</legend>
      <label for="details-name">Name:</label>
      <input id="details-name" type="text" title="type your name" name="details-name" size="15">
      <label for="details-phone">Phone Home:</label>
      <input id="details-phone" type="text" title="type your home phone number" name="details-phone" size="15">
   </fieldset>
   <fieldset>
      <legend>Select the fact sheets you want</legend>
      <input id="roses" type="checkbox" title="rose factsheet" name="roses" value="checkbox">
      <label for="roses">Roses</label>
      <input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox">
      <label for="daffodils">Daffodils</label>
      <input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox">
      <label for="tulips">Tulips</label>
   </fieldset>
</form>
Personal Details
Select the fact sheets you want

Step 5 - styling the accessible elements

Personal Details
Select the fact sheets you want

Copyright © Max Design 2005