Error message summary and required fields pattern

[srtalbot]

User story: Persona based As an end-user I need context on which errors to fix When provided a summary of the errors on a form So that I can provide the right information to submit the form

Story context Example of an error summary: Example form: https://forms-staging.cdssandbox.xyz/en/id/80 To discuss: should we allow custom error messages for some input fields (like textarea or textField) JSON Syntax documentation

IDRC accessibility audit findings and guidance. See item 2.4.4 and 3.3.3

Acceptance criteria

• [ ] error messages are in French and English.
• [ ] messages display properly on Chrome, Firefox, Edge, Safari, and Opera.
• [ ] error messages are read in order by a screen reader and provide context for the error
• [ ] focus states start at the top of the error message list and when links are clicked they go to the correct error
• [ ] manual accessibility testing meet WCAG 2.1 AA requirements.

Design documentation

• [ ] Guidance on error message content for: names, phone numbers (international and North American), address, postal code, province, country, basic text, basic number, text areas, alphanumeric, email, and date.
• [ ] Guidance on the pattern for labelling required fields
• [ ] Wireframes for pages, navigation, and review
• [ ] User flow diagram

[hillaryl]

Suggested update to the user story:

As an end-user proceeding through a form with multiple errors I need to know how (a) that there are multiple errors and (b) where they are Before I navigate away from the page containing the errors So that I can successfully submit my form without encountering new errors

[hillaryl]

Research background

Error summaries as a concept were used in other products following GDS best practice guidance .

There doesn't appear to be any research specifically support error summaries, but they have preformed well when testing CDS products (i.e. no major issues result from them).

There are some usability testing findings referenced in the GDS design system issue. The key takeaways are:

• End users didn't make use of the links, but they are important for accessibility
• When labelling, be very clear about where the errors are (previous page? on the current page?) so that screen reader users know where to navigate after the focus has jumped to the summary at the top of the page.