Understanding SC 3.3.1 Error Identification

3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)

Web is built with multiple components. One of the components to collect the data from the users is forms. When the data entered into these forms don’t meet the requirements of the website the user must be provided with clear way to identify where the error is & should be guided to fix it accordingly. This success criterion states that errors must be presented in text. That doesn’t mean we cannot use other methods of alerting the users that forms failed validation. We can use images, symbols, color in addition to text errors.

The errors presented to the user should be as specific as possible so that users can take necessary action to fix it. A generic error that “this field is required” will not cut out for a lot of disable users. If a form control needs a specific format then it needs to be provided as an instruction to the user before the form is filled or it also can be mentioned in the error message when it fails validation.

Per the definition in WCAG 2.0, an “input error” is information provided by the user that is not accepted. This includes:

• Information that is required by the web page but omitted by the user, or
• Information that is provided by the user but that falls outside the required data format or allowed values.

Points to Remember

• Make sure that errors are in text.
• Don’t just use color or visual cues to point out form errors.
• Use aria-describedby to bind the form control with the error programmatically.
• Don’t disable the submit button! Some websites disable the submit button & will only enable it if the form is filled appropriately. This is bad practice.
• Provide necessary instructions & be as specific as possible with the errors so that users can take necessary action.
• Make sure that errors are distinguished from the regular text on the web page.

Building accessible forms is a complex topic. There are various ingredients involved to build an inclusive form. Here is a series of articles that will guide you through the process of building accessible forms

• Accessible Forms & Problem with Placeholders
• Accessible Forms & Required Fields
• Best Practices for building Accessible Forms
• Handling Errors in Accessible Forms

References

Understanding Success Criterion 3.3.1