Example Form Validation, With Section Error

The form below uses an aria-live region for announcement of errors when the user blurs a field or submits the form. There is only one message in the live region area at any given time and messages persist for three seconds only. The live region is set to aria-live="polite".

When blurring out, fields with errors get identified as in an error state by 1) a thickened red border and bold label text, 2) a non-visible, prepended “Error: ” in front of the label, and 3) an aria-live message identifying the form field that has the issue. The live region message is on a three-second delay, in order to ensure that it is read after the details of the currently focused form item.

If focus goes back into the field with an error, the user will see a visible but aria-hidden, aria-describedby-associated “error bubble” describing the error. The text contents of the error remain associated with the field all the time it is in an errored-out state, even when the bubble is not visible. This can help discovery in mobile web browsers, where blur and focus events may be less reliable than on desktop, when a screen reader is active.

When in a field, validation runs on each key-up event, except Tab key. So we can clear the error as soon as the field's validation pattern is met.

When clicking the Submit button, if the user has not filled out the form correctly — that is, there are one or more errors — focus goes to the first field with an error, the error will show, and a live region message will announce to screen reader users, indicating how many errors are present in the form. This live region message is on a delay of three seconds, so that the message is less likely to get clobbered by AT dealing with the focus change — we have noticed some screen readers do not acknowledge live region messages when they occur simultaneously with programmatic changes of focus. When the form has been correctly filled out focus will go to a mock system error, in a div above the form, and no live region announcement is made.

Note: Error checking in this form is not very robust. Most of the fields are just looking for some text to go in them, except for the email, zip, and state abbreviation fields. There is no checking if a zip or state abbreviation is correct. Required fields are marked using aria-required. Using just the vanilla required attribute may invoke browser-implemented validation, which we want to avoid.

Personal Information

Favorite Type of Cat
an error