Understanding WCAG 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)
Error Identification Transcript
Hello everyone, today we’re going to talk about error identification. We will also discuss its importance, the benefits for various users, some examples, and how we can fix them.When users fill out online forms such as login forms and applications, modern websites and apps typically use icons and colors to notify them of errors if they fail to input required data or omit information in the required format. However, it is not enough to rely solely on visual cues to ensure users fully understand the errors. This should also be described in the text.
Let’s take a look at one scenario. Suppose a user forgets to include the “@” symbol in the email field of the login screen. An automated error detection system should trigger and display a clear message stating, “The email address you entered is incorrect.”
But why do we need this and who are the individuals impacted by this? Users with limited vision or without vision rely on screen readers to navigate the interface and may not be able to identify icons or colors. Users with limited cognitive, language, or learning abilities may struggle to understand error icons or color indicators.
A good example is demonstrated by an online travel website that employs automatic error validation when users input their personal information, such as name, address, and seat preferences. If errors are detected, they are identified and explained through textual messages, such as “Please enter a valid zip code” for an incorrect or invalid zip code. These error messages are also associated with the corresponding fields and are assigned a role alert or live region, which enables screen readers to promptly announce the errors as soon as they appear on the screen.
Now let’s take a look at one of the failure scenarios. One unfavorable instance can be observed in a sign-up form for a social media platform that requests the username, email, and additional information. While error validation is used in the forms to detect errors, the fields containing errors are only highlighted in red color without any accompanying identification description in the text or icons with alt texts, leaving users who have limited vision, color blindness, or cognitive difficulties unable to comprehend the errors.
In order to effectively address errors in your web forms, it is important to take the following steps. One should offer clear textual descriptions of any errors that arise during form submission. One should avoid generic error messages like “The field is required” and instead provide specific guidance, like “Please enter a valid username.” One should always link error messages to the respective form fields using the “aria-describedby” attribute. One should use ARIA live regions or role alert in error message containers to make sure screen readers announce errors as soon as they appear. One should also utilize both colors and icons to visually communicate errors in addition to providing textual error messages.
Now let’s talk about how we can fix them. One should place error messages within the form or immediately below it, but not above it, to provide clear and concise feedback to users. One should also provide jump links that enable users to navigate directly to the corresponding error messages to streamline the error correction process.
In conclusion, error identification is crucial for screen readers as it ensures that the content being read aloud is accurate and accessible. By detecting and alerting users to errors, screen readers can provide a more seamless and effective experience for individuals with visual impairments, ultimately improving their ability to navigate and interact with the content.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
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 Ponder
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
Hi Raghvendra,
Could you please little bit elaborate on how it is bad practice “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.”
Hi Vaibhav,
It is not good to disable the submit button. If the submit button is in disable state we should provide a mechanism to identify the required fields & the fields that failed validation too. Without this critical information users cannot fill forms successfully. Hope this helps & feel free to ask questions & share your thoughts.