1. Ensure that forms can be completed by keyboard
- Display forms so that the order in the code is the same as the visual order
- When using JavaScript drop down boxes to load a new page include a submit button to load the page
- Test your form by trying all the functionality with the keyboard
2. Clearly identify mandatory fields
- Use the text "required" or an image with the alternative text "required" to highlight required fields.
- Ensure the "required" text is included in the <label> element for the form control
- Asterisks may also be used to identify required fields, however, some users with
- low vision may have trouble seeing the asterisks
3. Positioning labels
- Position labels before input boxes, text areas and drop down boxes
- Position labels immediately after check boxes and radio boxes
- Position labels close to their corresponding input controls
4. Use label text that is clear and unique
- Use simple, clear language to label form controls
- Make sure the labels are unique
5. Associate labels with the corresponding input controls
- Identify all labels using the <label> element
- Associate labels with their controls using the "for" and "id" attributes. Ensure that all "id" attributes are unique
- Where a field does not have a visible label (e.g. search box), use the "title" attribute to label the input controls.
6. Set the font size in relative units
- So that the text in the form can be re-sized in Internet Explorer 6/7
- Set the font size in "ems" for input boxes, drop-down boxes, and buttons
- Set the height and width for radio buttons and checkboxes to 1.2ems.
7. Group form items into sections
Break forms into sections:
- Use headings (h1, h2, etc) to group sections of the form.
- Use the <legend> tag carefully, as it is announced for each item by screen readers.
8. Help users recover from errors
- Display error messages at the top of the form in a list. Each message should be an in-page link that points to the relevant form field.
- Include suggestions as part of error handling, such as spell checking for a search form
9. Steps in a process
- For multi-page forms, include a progress indicator and allow users to revisit any step in the process.
- Include the title and number of each step as part of the page title and as the level 1 heading on the page (e.g. "Step 1 of 4: Personal Details").
10. Providing instructions
- Position instructions at the top of the form (e.g. describing how mandatory fields are identified).
- Include validation instructions such as specific formatting as part of the label for the form field.