OKR 1.6: Error messaging and pages

[srtalbot]

OKR 1.6: Exceed WCAG criteria 3.3.3 “Error Suggestion” by providing more specific information to end-users on how to fix their mistake for common short answer questions.

Types of elements:

1. We know how to set an effective error message (E.x.: email, we have a specific component and can set a valid format easily)
2. We have some information on how to set an effective error message (e.g.: date - we have some specific options in the data component that can tell us more information on what is an expected valid input)
3. We have no information about how to set an effective error message

Context:

• Which error messages are server-side vs client-side validated?
• For type 1 & 2 we can do the work for them
• For type 3: HMW help clients set custom validation

Goals:

1. Review types 1 and 2 to see what work we can do to improve the error messaging for clients now
2. Ideation on how we support clients in creating more custom validation, where and when it will/won't apply.
3. Identify an interative approach to improving error messaging
4. Designs that are ready for dev implementation to be prioritized.

Iterative plan:

• Update 1: More specific errors for empty required fields Error summary/message for missing answers on required fields (Update 1) #4502 (generic template for empty fields)
• Update 2: Review** and update 404/500 to split form builder and form filler for different CTAs (appropriate to each audience)
• Subsequent component-specific updates: Format validation/error handling for phone number, email, etc. (higher-risk without full deep dive)
• Future updates: Customization of error messages by form builder (write your own errors to allow even more specificity)

More details: https://docs.google.com/spreadsheets/d/1qx6K-PkburkQ2anDbRAhLpgWIfbYF8aWV6N34NrFUp8/edit?gid=0#gid=0
Supporting content: https://tetralogical.com/blog/2024/10/21/foundations-form-validation-and-error-messages/

[anikbrazeau]

Past context:

• AODA Audit
• Client support ticket - Heritage
• Required fields left empty Error message summary and required fields pattern #449 Accessibility - Error message for missing fields #3950
• Site not operational GC Forms not operational error page #402
• Address validation Error validation for addresses #313
• Deleted form Improve error messages for users if they submit a deleted form #4129
• Form no longer available Error messages: Help end-users navigate back if a form is no longer available #2169
• Bilingual errors HTMLDownloadFile Test errors when SafeHydrate is removed #1723
• 500 Error 500 Error Page #2159
• File upload error File attachment: Investigate more specific error messaging for client side #4362
• Conditional logic Error messages: How might we prevent broken logic flows #3888
• Sharing a form errors Update error messaging for sharing a form file by email #3916
• Address complete AddressComplete: A split address that has a custom entered address provides an error #4314
• Error message to match GCDS fix: Remove more menu for Page text element #4390
• Error summary to match GCDS GCDS: Error summary  #4310
• Client's form submission not received through email Client's Form submission not received through email #2279
• Phone number component Phone number component #439
• Error language Missing translation ID for error with mix of EN/FR #3881

Current context

Follow Design System specifications and advice

• GCDS Error summary
  • Create usable error summaries
  • Use error summary with your own component instances
• GCDS Error message
  • Identify and define the error
  • Get the person back on track with a call to action
  • Write a message that's scannable
  • Use a human tone
  • Use error messages to support accessible task success
  • Follow a predictable format for error messages

[anikbrazeau]

Outlining error content here: https://docs.google.com/spreadsheets/d/1qx6K-PkburkQ2anDbRAhLpgWIfbYF8aWV6N34NrFUp8/edit?gid=0#gid=0

[anikbrazeau]

Note: some issues for multiple errors repeating can be mitigated by using pagination and one question per page to avoid summaries with many non-specific error messages.

[Abi-Nada]

Next steps: breaking up the work into actionable cards within this Epic (least priority for this Sprint)

[anikbrazeau]

https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f