- Logical order of form fields
- Order of fields should follow an easy logical format, both visually and with keyboard access.
- Check the linearised order of items using WAVE accessibility tool
- Clear instructions on what information is needed
Labelling Form Controls
- Required fields are labelled as such - ideally using the word Required as part of the label.
- Use <label for=''> tag to ensure screen readers can interpret your form fields correctly. Example here
- Link labels and input fields together using matching values in <label for='' > and <input id='' > tags.
- When using tables to layout forms, be sure to use 'scope' attribute to attribute headers to column/row contents where appropriate.
- When using checkboxes, use the <fieldset> tag to create a <legend> for the options.
- Use invisible labels where appropriate - <title> attribute will cause help-text to appear on hover.
- Ensure your form can be completed using a keyboard only.
- Radio buttons are not universally supported across browsers and screen readers.
- Select menu is preferable for 'choose only one' situations.
- Be sure to include explanatory text in the first option - sometimes screen readers will not associate the label with the select menu.
- Avoid use of selections that automatically redirect - use a normal submit button.
Test your Forms
- Use the WAVE accessibility tool
- Test the forms for full keyboard navigation
- Test with screen readers to ensure users get the needed information
American Foundation for the Blind
Getting your forms in Shape