Mandatory Form Fields Validation
This work aims to improve accessibility and resolve inconsistencies around field validation. The way we indicate mandatory fields and the way we deal with erroneous submissions can be made more usable for users with or without assistive technology (AT).
- Investigation on form labels, mandatory field and error messages
- Validation pattern accessibility requirement
- Field validation messages/errors are inconspicuous and easy to miss
Short form example
Long form example
- Required indicator is now in the same colour as the text
- Required indicator precedes the field label
- On a failed submission, the error field is re-labeled
- On a failed submission, the form displays an error
- On a failed submission, a link to the erroneous field is present after the error message, it is not displayed but relevant to screen readers
- The error icon is moved to the form-level error
- Put a link to the errored out field under the button, so screen readers can jump to it - this link can be invisible to sighted users but visible to AT with an ARIA label
- Making the required indicator text-coloured resolves the “red is an error” issue
- The required asterisk precedes the field label to make mandatory fields easier to scan and identify, both for those using assistive technology and without.
- Identifying the erroneous field is inline with the WCAG 2.1 guidance
- Identifying the error at the form level is inline with the WCAG 2.1 guidance
- Moving the error icon from the field to the form level resolves the clash with both the show/hide icon and third-party password managers
The main WCAG technique referred to is Providing text descriptions to identify required fields that were not completed.
This technique relates to:
- Success Criterion 3.3.1: Error Identification (Sufficient)
- Success Criterion 3.3.2: Labels or Instructions (Sufficient when used with G131: Providing descriptive labels)
- Success Criterion 3.3.3: Error Suggestion (Sufficient)
- Success Criterion 4.1.3: Status Messages (Sufficient when used with ARIA19: Using ARIA role=alert or Live Regions to Identify Errors)
From the technique:
The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted.
- Fill out a form, deliberately leaving one or more required (mandatory) fields blank, and submit it.
- Check that a text description is provided identifying the mandatory field(s) that was not completed.
- Check that other data previously entered by the user is re-displayed, unless the data is in a security related field where it would be inappropriate to retain the data for re-display (e.g. password).
- #2 and #3 are true