no. 136

Make sure users are notified of required fields left blank as soon as the page reloads

There are many ways to successfully convey to assistive technologies users that required fields might have been left blank, using client-side scripting techniques or even ARIA. But when no such technique is used and the information submitted is processed directly on the server, it is important that screen reader users be quickly made aware when the form returns errors. One reliable way to do this is to notify users of a problem, as soon as the page reloads.

To do so, simply make sure that a notification of the presence of errors is indicated directly in the title element of the page. While the value of the page title should retain all relevant information about the page itself, in cases where notification error messages are required, the title element value should include such a notification, letting users know about the problem. As the page reloads, authors can dynamically modify the value of the title element, so it begins with a warning that some required fields were omitted on the previous screen. While other mechanisms must also be implemented to help track input errors returned in the page itself, providing such a notification in the page title will guarantee that the first thing screen reader users hear when reloading the page will be that the form was not successfully submitted, and that input errors or omissions need to be addressed.

User Story

As a user using assistive technology, I want to be made aware when required fields are overlooked and left blank as soon as the page reloads, so that I can enter the required data and successfully submit the form.

Simple Code Example

<title>Required fields were left blank and as a result, the form was not successfully submitted. Please fix the errors below. Contact Us – XYZ MegaCorp</title>

Testing Methodology

Fill out a form and submit it, while deliberately leaving one or more required (mandatory) fields blank. As the page reloads, validate that the page title indicates the presence of errors. Make sure that any data previously entered by the user is re-displayed, unless the data is in a security related field where it would be inappropriate to retain the data for re-display.

Specification Details

WCAG 2.0: Level A

Principle: Understandable

Guideline: 3.3 Input Assistance

Success Criterion: 3.3.3 Error Suggestion

Related Technique: G83