BPOW: Displaying multiple errors on a form

By November 5th, 2013

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.

Error messaging with skip links example

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>

In this error messaging example, we’ve also used JavaScript to provide “skip links” after fields with errors. As users tab out of a field with an error that they’ve corrected, they can easily skip to the next field with an error. We have also included some text in the error bucket that describes this functionality and displays the appearance of the skip icon so that visual users are aware of the functionality as they proceed through the form. This is a huge benefit to keyboard users as it greatly decreases the amount of keystrokes required to navigate the form and correct multiple errors. It also reduces the amount of elements on the page that a screen reader must navigate through in order to submit the form successfully.

Tagged with: