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
Code begins
<h1>Your form has been successfully submitted.</h1>
Code ends
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
Code begins
<h1>2 Errors – Contact information</h1>
Code ends
The WET form validation uses a dedicated level 2 heading for the error message (and it can be configured to be lower):
HTML
Code begins
<h2>The form could not be submitted because 2 errors were found.</h2>
Code ends
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
Code begins
<head>
<title>2 Errors: Contact information – Registration – Company X</title>
[…]
</head>
Code ends
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.
Example begins
Example ends
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.
Example begins
Example ends
HTML
Code begins
<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>
Code ends
CSS
Code begins
.error { color: #900; }
.success { color: #007a00; }
.error input { border: 3px solid #900; }
.success input { border: 3px solid #007a00; }
label { display: block; }
Code ends
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
Example begins
Example ends
HTML
Code begins
<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
- G83: Providing text descriptions to identify required fields that were not completed
- G85: Providing a text description when user input falls outside the required format or values
- G139: Creating a mechanism that allows users to jump to errors (Advisory)
- G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
- G199: Providing success feedback when data is submitted successfully (Advisory)
- ARIA18: Using aria-alertdialog to Identify Errors
- ARIA19: Using ARIA role=alert or Live Regions to Identify Errors
- ARIA21: Using Aria-Invalid to Indicate An Error Field