In this week’s Best Practice of the Week (BPOW), we show you how to handle displaying multiple errors on a form.
When a form contains multiple errors, we want to provide an easy way for users to get a summary of all of the issues they need to fix on the form. Users with cognitive disabilities may have trouble remembering all of the issues they need to correct in order to successfully submit a form. The best way we’ve found to help with this is to provide an error summary, or bucket, at the top of the form.
The error bucket contains the following:
- A heading that identifies the number of errors in the bucket. For example, “The following 3 items require your attention.”
- An unordered list that provides a text description of the issue with the field name linked to an anchor for that form field. For instance, “Please provide a last name” in which last name links to an anchor that takes the user directly to that field.
<div class="errors" role="alert" aria-live="assertive"> <h3><img src="images/error-white.png" alt=""> The following <span>3</span> items require your attention</h3> <ul class="bulleted"> <li>Please provide a <a href="#name_first">First name</a>.</li> <li>Please provide a <a href="#name_last">Last name</a>.</li> <li>You can’t have a <a href="#date_birth">Date of birth</a> in the future.</li> </ul> <p>Skip to the next item using <img src="images/next.png" alt="Fix the next error">.</p> </div>