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.
Mappings
  • HTML4 Legacy Techniques (Required)
  • HTML5 and ARIA Techniques (Required)
WCAG Success Criteria

3.3.1 Error Identification (Level A, Primary Success Criterion)

Other Related 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