During manual evaluation, take note of any forms that include validation. Validation is any functionality where the site checks input data to ensure that it is filled out correctly. Examples include verifying that a required field has data filled out in it or For this criterion, you are looking to ensure that there is an alert whenever there is an invalid input (such as leaving a required field blank, or not using a proper email format).
The notification that an error has occurred must be immediately perceived by users using any assistive technology (such as a screen reader). Furthermore, the notification must inform the user of both the field that was incorrectly input, and the reason it was incorrectly input.
There are examples below indicating valid methods of Error Identification. They are split into "client-side" and "server-side" validation categories. Client-side validation is any form of validation where the form does NOT submit and immediately informs the user of the errors without a page refresh. Server-side validation does submit the form, but refreshes the page and displays information about what fields were incorrectly filled out.
Client-side validation
Upon hitting the "Submit" button, an alert dialog pops up, detailing all the fields which were incorrectly filled out. The incorrectly filled out fields have the label change to identify the error. A link is provided after the submit button (or the user is redirected to a spot where links are provided) to each invalid input.
Upon hitting the "Submit" button, the user's focus is directed to text stating which fields are invalid. The invalid fields are identified visually and in HTML using aria-invalid.
During the course of filling out the form, if a required input or input with invalid data loses focus, the form automatically changes the label of the form field to indicate that there was an error.
Server-side validation
After being redirected, the invalid form fields are identified at the top of the page. The individual form fields which were incorrectly filled out have their labels changed to identify the error.
After being redirected, the invalid form fields are identified at the top of the page, and each incorrectly filled out form field has aria-invalid applied to it.
