Best Practices for Form Design

Best Practices - General

Best Practices - HTML

Best Practices - Script

Common Form Design Errors

Error #1: Form control (text box, check box, radio button, menu, etc.) with no label

In this example, the form controls do not have associated label elements, so assistive technology may not be able to determine which textual label goes with which control:

First name:
Last name:
I would be interested in learning more information

Error #2: Image button with no alt text

In this example, the image being used as a type of input in a form is missing the alt tag that assistive technology would use as a label:

To submit this form, click the "print" icon below:

Error #3: Automatically submitting a form and presenting new content without prior warning

In this example, the form will submit as soon as an item from the menu is selected, but users are not warned ahead of time that this action will occur:

Error #4: Using only pointing-device-specific event handlers for a function

In this example, the text responds only to a mouse click, so the keyboard cannot be used to activate the same effect:

Click on the text to see it change from black to purple!

Error #5: Identifying required or error fields using color differences only

In this example, the required fields are identified by a purple border that users may not be able to distinguish from the standard black border:

Note: All text fields outlined in purple are required.