Forms and Web Accessibility

There are two main ways to make sure electronic forms are accessible. The easiest way is to keep the form element next to it's associated text, without separating it into different table cells. The other way is to use 'label' tag and 'id' attribute to create relationships between form elements and their lables.

Simplify your form

The easiest way to create an accessible form is by keeping the form element next to it's associated text

Example

 

First Name
Last Name

View HTML Code

<form name="form1">  <p>First Name <input type="TEXT" name="FNAME">  <br>  Last Name <input type="TEXT" name="LNAME">  <br>  <INPUT name="SUBMIT" TYPE="SUBMIT" VALUE="SUBMIT">  </p>  </form>

Use the 'label' tag and 'ID' attribute

If you need to separate the form elements from their assossiated text, you can use the label tag and the id attribute to allow non-visual text browsers to associte them.

Example of form with form fields and labels separated in different table cells

 

First Name:
Last Name:

View HTML Code

<form>  <table>             <tr>   <td>      <label for="first">First Name:</label>   </td>  <td>      <input type="text" name="firstname" id="first">  </td>  </tr>             <tr>   <td>  	<label for="last">Last Name:</label>  </td>  <td>  	<input type="text" name="lastname" id="last"></td>  </tr>             <tr>  <td>&nbsp;</td>  <td>  	<input name="submit" type="submit" value="submit">  </td>  </tr>             </table>   </form>