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