Information on invalid values

Rule ID Error 1
Definition Form controls with invalid values must provide information to assitive technologies that the values are invalid.
Purpose
  • Users must be able to identify form control values which are invalid in order to successfully correct the values and submit the form.
Required Yes for HTML4 Legacy Techniques ruleset mapping
WCAG Success Criteria

3.3.1 Error Identification (Level A, Primary Success Criterion)

Rule Category Forms
Scope Element
Target Resources textarea, select and input elements
  • select
  • textarea
Techniques
  • Add the text "invalid" to the label of the form control, the text can be placed off screen using CSS.
  • Add the image to the label. The image should be visible indicating an invalid value with the alt text 'invalid'.
  • Use aira-invalid attribute to indicate the form control is invalid.
Manual Checks
  • Enter invalid values into form controls that are validated and activate the validation event (i.e. form submission, change of focus...).
  • For the form controls with invalid values check to make sure the technique for indicating the invalid value is present.
Informational Links