Chapter 7: Error Handling

As we validate each form element before the user submits the response, we must think about the post submission. Post submission user may have two possible responses. The successful submission and the unsuccessful submission of the form.

The successful submission is not so complicated. If the user is informed that the submission is successful with the data they have to know is sufficient. In some forms which involves series of form screens such as checkout for a retail website, booking a flight, third party transfers on a banking website etc the submission of one form displays another form. This indicates that the previous submission is successful. Either by displaying and announcing the success message or by setting focus to the beginning of the next form the success message can be handled properly.

Let us see how to validate a successful form submission.

Validation for successful form submission.

1. Open the page on the browser.
2. Fill the entire form with accurate data.
3. Hit the submit button if it is a single page form.
4. The success message must be displayed. Along with the message if any additional information need to be conveyed provide that too. Eg: For a customer care form, a ticket number might be allotted for the reference of further communication. Along with the success message the ticket number might be useful.
5. For screen reader users verify either the focus is set on the newly displayed content or the newly displayed content is spoken allowed as soon as it is displayed on the screen.
6. For a multi form application, as the user clicks on next or similar button, the focus must be moved on to the beginning of the new form
7. IF the focus is still on next button even after the new screen is displayed it is an accessibility violation, else if the focus is pushed to the beginning of the form this success criterian is passed.

Ensure that step 4, 5 and / or 7 are passed.

Error handling

The second scenario is an unsuccessful submission of the form. If the user fills in the form with the data either that falls outside of the allowed parameters, completely miss to fill in a mandatory field this scenario araises. There are few success criteria in WCAG 2.0 that talks about the error messaging and error handling. Let us now understand those scenarios and steps to validate them.

Validation for error handling

Check 1: Error Identification.

1. Open the page on the browser.
2. Fill in the form fields intentionally leaving couple of mandatory fields blank.
3. Also fill in few fiels with incorrect input data such as wrong format or the value that fall outside of allowed range.
4. On submission of the form, error messages must be displayed for blank mandatory fields and incorrect input fields
5. Verify these error messages are in clear text, not with some other visual queues alone.
6. Verify that the error messages are read out by the screen reader when they are navigated by the screen reader at the individual element level.
7. On submission of the form as soon as the error messages are displayed, inform the user that the form submission is failed that is also announced by the screen reader. Manage the focus to move either to the beginning of the form or to the first field in error.

Note 1: Ensure that step 5, step 6 and step 7 are passed to pass this success criteria

Note 2: Few types of errors such as required fields, incorrect formats can also be defined using HTML5 or ARIA techniques. If these techniques substitute the error message in text ensure that a visual indication is provided for non screen reader users.

Check 2: Error Suggestions

1. Repeat first 3 steps of error identification and step 4 is checked for the display of messages.
2. Read each error message and understand if the messages provide suggestions for the user to correct the fields marked in error and resubmit the form.
3. If the messages have the suggestions to correct the form this success criterian is passed, else it is an accessibility violation.

1. Note: Error suggestions for the fields that have security or legal implications are exumpted from this success criterian.

Check 3: Legal, Financial, data

1. Open the page on the browser.
2. Check for any forms that have any one of the following.
   1. Legal commitment required by the user i.e. accepting terms and conditions etc.
   2. Any financial transactions involved.
   3. Any data that is getting submitted to the server.
3. If any of the above conditions are involved, verify any of the following accomidations are provided by the developer.
   1. Transactions are verified for input errors before submission and a provision is available to step back and correct them.
   2. Trans actions and commitments can be verified before submitting to the server.
   3. Submissions can be riversable.

If any one of the above criteria are is met then this success criteria I passed, else failed.

WCAG Success Criteria

• 3.3.1 Error Identification(Level A)
• 3.3.3 Error Suggestions (Level AA)

3.3.4 Error prevention – Legal, Financial, data (Level AA)