Springboard

Error Summary 

<div id="error-summary" class="error-summary" aria-live="assertive" role="alert">
    Please correct the errors belows
</div>
 
<div id="error-summary" class="error-summary" aria-live="assertive" role="alert">
  {{ summary }}
</div>
 
{
  "summary": "Please correct the errors belows"
}
  • Content: 
    .error-summary:empty {
  display: none;
}

.error-summary {
  border: solid 2px $color-error;
  border-radius: .5em;
  padding: 1em;
  color: $color-error;
  margin-bottom: $line-height;
}
  • URL: /components/raw/error-summary/_sass.scss
  • Filesystem Path: components/01-elements/03-form-controls/error-summary/_sass.scss
  • Size: 189 Bytes
  • Handle: @error-summary
  • Preview:
  • Filesystem Path: components/01-elements/03-form-controls/error-summary/error-summary.hbs

Best Practices

  • If validation is performed on the frontend, be sure to include aria-live="assertive" and role="alert" so that assistive technology announces the error summary when it appears.
  • If validating server-side, ensure the error summary is at the top of the page and that you provide a “skip link” to jump straight to the page content so that users of assistive technology don’t have to traverse the header content all over again.