Ensure a logical tab order through form controls.

(see guidelines for overcoming access barriers)

Using Tab-index creates a logical tabbing order when moving through the form using the keyboard.

Group information using the fieldset tag where natural and appropriate. Each fieldset will be surrounded by a border and can be embellished using CSS. If you use a legend tag it will appear as a header to each fieldset. Only one legend per fieldset is permissible.

Using the fieldset and legend tags can produce varied results in different browsers

Example:

Ensuring a logical tab order through form controls:

Personal details

First name:

Last name:

Address

Street:

Suburb:

City:

Postcode:

Code for ensuring a logical tab order through form controls

<form name="details">
  <fieldset>
    <p><legend>Personal details</legend></p>
    <p><label for="firstname" accesskey="F"></p>
    <u>F</u>irst name:</label></p> 
    <p><input type="text" id="firstname" name="fname" tabindex="1"></p>
    <p><label for="lastname" accesskey="L"><u>L</u>ast name:</label></p> 
    <p><input type="text" id="lastname" name="lname" tabindex="2"></p>
    </fieldset>
  <fieldset>
    <p><legend>Address</legend></p>
    <p><label for="street" accesskey="S"><u>S</u>treet:</label></p> 
    <p><input type="text" id="street" name="street" tabindex="3"></p>
    <p><label for="suburb" accesskey="U">S<u>u</u>burb:</label></p> 
    <p><input type="text" id="suburb" name="suburb" tabindex="4"></p>
    <p><label for="city" accesskey="C"><u>C</u>ity:</label></p> 
    <p><input type="text" id="city" name="city" tabindex="5"></p>
    <p><label for="postcode" accesskey="P"><u>P</u>ostcode:</label></p> 
    <p><input type="text" id="postcode" name="postcode" tabindex="6"></p>
    
  </fieldset>
</form>

Back to top