Web forms that cannot be read, filled out, and submitted in a logical order using only a keyboard are inaccessible to many users. After the form is submitted, users need to be made aware of any errors that occur in an accessible (text-friendly) way. Look to the following techniques to improve things like linear structure, labels, instructions, and error-handling.
How to Fix
- Keep instructions succinct.
- Place any instructions before they are needed (e.g. at the start of the form).
- Provide examples of expected data formats that could cause confusion without a cue (e.g. Date (dd-mm-yyyy))
Label All Fields
Check that all form controls and input fields are identified with a label element.
- Ensure that the "for" attribute of the label element matches the "id" attribute of the input, text area, or select element.
- Position labels close to their associated fields in a way that is predictable.
- For most fields, place the label immediately before the field.
- For checkboxes or radio buttons, place the label immediately after the field.
- Group any related form elements (for example, checkboxes) using the fieldset and legend elements. Single elements that are properly labelled do not require a fieldset and legend.
Mark Required Fields
- Indicate any required fields using clear, visible label text. See Colour for more information.
- Consider using the aria-required property to identify required fields.
- Good Example: Firstname (Required):
View the Form
- Temporarily disable the CSS styles to view the linear structure of the form.
- Ensure that the logical order, structural relationships and meaning of the page content are preserved with styles disabled.
Use the Form with a Keyboard
- Check that the entire form can be read, filled, and submitted using only the keyboard.
- Ensure that any focusable elements receive focus in an order that preserves meaning and operability.
Submit the Form
- If there is a time limit associated with the form, allow users to turn off, adjust, or extend the time limit. See Providing Enough Time for more information.
- If you use an image submit button (i.e. <input type="image">), ensure that the image has alternative text that describes the function of the button.
If an input error is automatically detected, identify and describe the error in text so that users are aware of what has occurred.
- Inform users when their input falls outside a required format or set list of values.
- Identify any required fields that were not completed.
- Ensure that any data previously entered by the user is re-displayed, unless the data is in a security-related field (e.g. password, financial information, etc.)
- Be aware that text error messages can be accompanied by additional cues, such as highlighting or outlining the error field with a colour.
Only Use Document Forms if Necessary
- Use an HTML form rather than a PDF form whenever possible.
- For more information on accessible PDFs, see Document Accessibility.
Things to Avoid
- Do not rely on only one sense (e.g. sight, hearing) when providing instructions (e.g. Click the round button to reset form).
- Avoid using CAPTCHA. If you do use CAPTCHA, you must also provide an alternative mode that can accommodate different types of sensory perception.
- Avoid nesting fieldset elements (i.e. a fieldset within another fieldset)
- Guide to Accessible Forms by Roger Hudson
- Understanding Success Criterion 1.3.1 Info and Relationships (Level A)
- Understanding Success Criterion 1.3.2 Meaningful Sequence (Level A)
- Understanding Success Criterion 1.3.3 Sensory Characteristics (Level A)
- Understanding Success Criterion 2.4.3 Focus Order (Level A)
- Understanding Success Criterion 2.4.6 Headings and Labels (Level AA)
- Understanding Success Criterion 3.3.1 Error Identification (Level A)
- Understanding Success Criterion 3.3.2 Labels or Instructions (Level A)
- Understanding Success Criterion 3.3.3 Error Suggestions (Level AA)
- Understanding Success Criterion 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)