Form errors

Introduction

As users attempt to complete forms, it is important that they be notified promptly when they make errors, and are provided assistance in fixing those errors.

For assistive technology users, completing forms can be especially arduous when one or more of the following are not true:

The invalid state of a field is not communicated
The error message is not associated with the field
The presence of errors is not communicated on submission

The careful wording of error messages and descriptions is also important, as well as indicating which text is error text without relying entirely on color or other visual cues.

WCAG criteria

3.3.1 Error Identification (level A)
3.3.3 Error Suggestion (level AA)

Scope of the issue

Throughout the C3 software, form errors are announced upon form submission, but are not associated to the form element. Rather, form errors are announced via a dialog window that does NOT communicate the error message to assistive technologies like screen readers. Pictured here is an example of an error received on the “Alerts Lookup” form in C3 as well as what the screen reader (VoiceOver) announces to the user:

C3 Alerts Lookup form error

Though the dialog window visually explains the error and what the user must do to correct it, the screenreader only communicates the error to the user as, “Now in, demo.issinfo.com says, window, OK, button.” This would leave non-sighted users confused about what error occurred and what steps they need to take to remediate the error.

Fixing the issue

Form error messages must be included consistently and accessibly across the C3 software.

Individual form errors

The following code example shows what this form might look like (according to the semantic structure set forth in Forms) in its invalid/errored state, with notes to follow:


<fieldset>
    <legend>Alerts Reporting Selection Criteria</legend>
    <label for="trustnum">Trust #: </label>
    <input type="text" id="trustnum" aria-describedby="trustnum-error" aria-invalid="true">
    <div id="trustnum-error">
        <strong>Error:</strong> Please enter a Trust #.
    </div>
</fieldset>

The aria-describedby attribute associates the input field to the error message element using the shared trustnum-error in this case.
The aria-invalid property sets the state and tells assistive technology users who have focused the field that it is invalid. Note that you must explicitly write ="true". Using aria-invalid (boolean) alone is unreliable.
The id value matches the aria-describedby value.
The <strong> tag allows for added meaning to the content. Visually, it works the same as the <b> tag, but it also serves as a non-visual indication to a screen reader of how something should be understood.

However, if the forms retain the table markup they currently have, the dialog window may also be modified to support assistive technologies. Here is an example of an accessible dialog window, with notes to follow:


<div role="dialog" aria-labelledby="dialog-heading">
    <button aria-label="close">x</button>
    <h2 id="dialog-heading">Form error</h2>
    <p>Please enter at least one search criteria.</p>
</div>

The dialog is only announced as a dialog if it takes the dialog ARIA role.
The aria-labelledby relationship attribute makes the element carrying the id it points to its label.
The close button uses aria-label to provide the text label “close”, overriding the text content.
The heading is used as the dialog’s label. The aria-labelledby attribute points to its id.

Announcing the presence of errors

You should let users attempt form submission and alert them to errors if they are present. You can announce error messages to screen readers by including a live region.

If you are not familiar with live regions, they announce (in screen readers) content as it is added with JavaScript. The basic markup for an alert live region is as follows:


<div role="alert" aria-live="assertive">
    <!-- add anything here to have it announced in screen reader software -->
</div>

A live region would be used, for example, if you wanted to add a div with a form error corresponding to a specific form field to the page upon form submission.