User notifications

Designing user notification

Upon form submission, notify the user of success or of any errors.

Ensure error messages are clear and concise and provide simple instructions for resolving the error.

As per the examples below, provide feedback:

  • in the main heading (optional)
  • in the <title> element (optional)
  • as a list of errors before the form
  • In-line, programmatically associated with the form control

  Good example: Use the main heading

HTML

<h1>Your form has been successfully submitted.</h1>

While a success message may have a dedicated page, errors return the users to the form on the same page. The existing <h1> element must still describe the purpose of the page, so preface the existing topic with a short error message:

HTML

<h1>2 Errors – Contact information</h1>

The WET form validation uses a dedicated level 2 heading for the error message (and it can be configured to be lower):

HTML

<h2>The form could not be submitted because 2 errors were found.</h2>

  Good example: Use the title element

The <title> element, in the page <head> element, is the first thing heard by screen reader users on page load. Prefacing the existing title value with “Success” or “Errors” (or “4 Errors” if you have the count) gives these users immediate feedback.

HTML

<head>
   <title>2 Errors: Contact information – Registration – Company X</title>
   […]
</head>

The WET form validation does not leverage the <title> element.

  Good example: List errors before the form

List the errors before the form and under a heading that explains what’s going on.

Each error listed should:

  • Reference the label of the corresponding form control.
  • Provide a concise, easy to understand description of the error.
  • Indicate how to correct mistakes and remind users of any format requirements.
  • Include an in-page link to the corresponding form control for easy access.

The WET form validation also numbers each error in the list and at the control.

  Good example: In-line feedback

Provide success and error feedback in-line at the form control itself. Combine a visual indicator and a feedback message.

For instance:

  • Indicate success fields with the green word “OK” prefixed in the label, a green border on the input, and a green checkmark.
  • Indicate errors fields with the red word “Error” prefixed in the label, a red border, and red instructions on how to correct.

In this example, each group of label, control, and message is nested in a <div> with a class name, either “success” or “error”, that sets the colour via CSS. The word “OK” or “Error” is inserted at the start of the label, providing a text equivalent for users with colour blindness. Lengthier feedback is associated with the form control via the aria-describedby attribute, pointing to the id attribute value of the message, held in a <span> element. The checkmark is declared as “check” by the NVDA screen reader.

WET form validation’s treatment of in-line feedback differs, as described in the next section.

HTML

<div class="success"> 
   <label for="username"> 
      <strong>OK:</strong>
      Username: 
   </label> 
   <input type="text" name="username" id="username" value="Johnny" aria-describedby="userDesc">
   <span id="userDesc">✓</span>
</div> 
<div class="error"> 
   <label for="expire"> 
      <strong>Error:</strong>
      Expiry date: 
   </label> 
   <input type="text" name="expire" id="expire" value="May 2015" aria-describedby="expDesc">
   <span id="expDesc">Use the format MM/YYYY.</span>
</div>
<div>
   <button type="submit">Submit</button>
</div>

CSS

.error { color: #900; } 
.success { color: #007a00; } 
.error input { border: 3px solid #900; } 
.success input { border: 3px solid #007a00; }
label { display: block; }

WET form validation’s user notification

WET form validation generates user notifications that differ from the advice provided above:

  • By default, WET uses a <h2> heading for the error summary, and it can be configured to be lower. It can’t be set as <h1>.
  • WET doesn’t modify the <title> element to include a success/error message.
  • WET doesn’t provide in-line success feedback.
  • WET numbers the errors.
  • With in-line feedback, WET appends all error messaging in the label, rather than pointing to the message with the aria-describedby attribute from the control. This is verbose content for a label, but the user is guaranteed to encounter the information.

The example page for WET form validation covers all variety of user input.

  Good example: WET in-line feedback

HTML

<div class="form-group has-error">
   <label for="pcodeca1" class="required">
      <span class="field-name"> Website URL (https://www.url.com) </span>  
      <strong class="required">(required)</strong>
      <strong id="pcodeca1-error" class="error">
         <span class="label label-danger">
            <span class="prefix">Error 6: </span>
            Please enter a valid URL.
         </span>
      </strong>
   </label>
   <input class="form-control error" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalcodeca="true" aria-invalid="true">
</div>

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

Back to top