The form below uses multiple techniques to indicate form field errors.
Error:message is associated with the field.
aria-invalid="true" is injected into the control.
Error in previous field, [text of error message].
div above the form. Since there is change of context that accompanies this new content, there is no live region announcement.
(optional),and those fields are marked
aria-required for screen reader users. Use of this attribute allows us to skirt unwanted side effects sometimes seen with browsers/screen readers when the boolean
required is used.
Live region messages — considered to be
status messages on this page — are on a delay of two seconds, so that messages are less likely to get clobbered by the screen reader, which may be dealing with announcements that result from focus changes. We have noticed some screen readers do not acknowledge live region messages when they occur simultaneously with changes of focus.
The error and helper text/formatting text below the field are aria-hidden in order to minimize chatter when browsing the form with a screen reader.
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.
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, which match on particular patterns. There is no checking if a zip or state abbreviation is correct.