accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email.

Back to the overview page

Error suggestions

When someone makes a mistake filling in a form:
→ Give them suggestions for correcting it.

When an error is detected, suggestions for correcting the issue must be provided – unless doing that would compromise security (like giving a hint to a password for example).

On this page:

• Requirements
• Guidance for Design
• Guidance for Web
• More info

---

Requirements

• When a form validation error is detected, a suggestion is provided to help the user correct the issue.

Common mistakes

• An error is detected and the user is notified, but no suggestion is given to help them resolve it;
• A login error is detected and a suggestion is provided, but it comprimises security by revealing that a particular username exists.

Why?

This helps everyone resolve issues more easily, but especially people with cognitive disabilities who find processing information difficult.

Official wording in the Web Content Accessibility Guidelines

3.3.3 Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. (Level AA)

See the W3C’s detailed explanation of this guideline with techniques and examples.

---

Guidance for Design

• Error Message component and guidance in the GDS Design System

---

Guidance for Web

Associating a hint with a text input field using aria-describedby

<label for="national-insurance-number">
  National Insurance number
</label>

<span id="national-insurance-number-hint">
  It’s on your National Insurance card, benefit letter, payslip or P60. For
  example, ‘QQ 12 34 56 C’.
</span>

<input
  id="national-insurance-number"
  name="national-insurance-number"
  type="text"
  aria-describedby="national-insurance-number-hint national-insurance-number-error"
/>

<span id="national-insurance-number-error">
  <span class="visually-hidden">Error:</span> Enter a National Insurance number
  in the correct format
</span>

More guidance for Web

• Basic form hints article on MDN.
• Using aria-describedby to provide form hints by Léonie Watson and The Paciello Group.
• Practical Support: aria-label, aria-labelledby and aria-describedby section in the W3C’s Using ARIA document.

---

More info

Sources

• W3C Web Content Accessibility Guidelines 2.1
• Government Digital Service WCAG 2.1 Primer

Contribute

This document is in beta. Help us by reporting issues via Github or email.

This site is open source. Improve this page.