When a sighted user fills out a form, they go through the process of filling in a field, tabbing over to the next field and filling it out until the form is completed. This is easy for visual users since the labels are placed in a way that they seem to be linked to each of the fields. For someone who is blind and/or using a screen reader, the visual layout will not be helpful and though they can see each of the input fields, they might not know what label is associated with that field.

How do I correctly implement forms?

  • Put labels adjacent to their controls.
  • Follow the HTML best practices for labeling form controls of the following types:
    • For input types: text, password, checkbox, radio, file, select and textarea elements - use the <label> element

      • <label for="first">First Name </label> <input id="first" type="text" name="textfield33" size="12"/>
    • For input types: button, submit, reset - use the value attribute
      • <input type="submit" name="gobutton" value="Go" id="go"/>
    • For input type: image - use the alt attribute
      • <input type="image" scr="signup.gif" alt="Click here to signup"/>
  • Sets of related form information should be grouped together using the fieldset and legend elements.

View Best Practices for Forms for more information.