Rule: Using aria-invalid to identify the validity of control values.

Rule ID Error 1
Conformance Required
Definition Form controls with invalid values must provide information to assisive 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.
Conformance Required
WCAG Success Criteria

Success Criterion 3.3.1 Error Identification

Other Related Success Criterion:

Rule Category Forms
Rule Scope Element
Techniques
  • Native HTML form controls have a support for many types of validity testing, these features should be used before using aria-invalid attribute.
  • For custom ARIA widgets or when native HTML form control validation is not sufficient, the aria-invalid attribute can used to identify invalid values.
  • Use aria-invalid attribute to indicate the form control has an invalid value.
  • 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'.
  • NOTE: Native form controls with with validity testing should avoid using aria-valid property, if the aria-invalid is used it must be synchronized with the browsers computed validity value.
Information Links