Back to the main menu.

Form Example


Often the interaction between form controls and screen readers is unpredictable, depending upon the design of the page containing these controls. Some developers place control and their labels in different table cells. Others place control labels in various locations at different distances from the controls, often making the response from a screen reader less than accurate.

The HTML <label> element is used to attach information to other control elements. The <label> element uses the for attribute to associate the label with another control. You should use the <label> tag to describe a form control, and the description should appear adjacent to the control.

Note that this is an incomplete login application meant just to illustrate how to write form controls for accessibility. Pressing of the "Login" or the "Reset" button will not result in an actual login.





source code for above:

<label for="username">Input User Name: </label>
<input type="text" name="j_username" size="16" id="username">
    
<label for="password">Password: </label>
<input type="password" name="j_password" size="16" id="password">