Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility - Error message for missing fields #3950

Closed
jprince-cds opened this issue Jul 3, 2024 · 6 comments · May be fixed by #3963
Closed

Accessibility - Error message for missing fields #3950

jprince-cds opened this issue Jul 3, 2024 · 6 comments · May be fixed by #3963
Labels
a11y Accessibility related issue App design Design task / work required 🚦 Severe Severe Impact Issue

Comments

@jprince-cds
Copy link

jprince-cds commented Jul 3, 2024 •
edited by srtalbot
Loading

User story

As a form filler using a screen reader
I need to know how many errors I have on the page
I need to be able to connect the error announced to me with the form question I need to update, without using any visual cues.
So that I can complete the error and submit my form

There are two scenarios this user story should cover:

  1. Long, single page forms
  2. Shorter paginated forms

Description

For any forms with several required fields, if the user submit without any data, all the issues for missing required fields have the same label "Please complete the required field to continue". This is a failure of accessibility SC 3.3.1.

The error message should provide the label of the inputs.

Steps to reproduce

  1. Create a form with more than one required fields.
  2. Submit the form without providing data in any of those required fields.
  3. The error message is not considered accessible.

Expected behaviour

Like in https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html, Title and First name are added in the error message.

Error 1: Title - This field is required.
Error 2: First name - This field is required.

It should look like this:

image.png

Additional context

Reported in Freshdesk ticket 18068.
@Abi-Nada Abi-Nada added a11y Accessibility related issue App labels Jul 4, 2024
@thiessenp-cds
Copy link
Contributor

I think this falls under a "grey" area in WCAG where interpretations may vary. The success criteria (SC) requires that an error is identified and described. This is done. If two errors have the same error message text, each is distinguishable by following the related link back to the original error.
I agree that an error could be identified/described more clearly by including something like the original input label vs. having to follow each error link back to the related input to figure out which is which.
In my opinion/interpretation this is not a WCAG failure and instead a helpful enhancement.

@thiessenp-cds
Copy link
Contributor

IMO it would be helpful if this was implemented. (will look into the lift)

@thiessenp-cds
Copy link
Contributor

Noting so I don't forget:
It would also be helpful to update the page title (in head) on a validation error. Another tool/means to help identify there was an error and the form not submitted. This would be supplementary to the existing live-regions that expose dynamic error updates to AT.

@thiessenp-cds
Copy link
Contributor

I have a rough prototype working. The lift won't be that big.

@thiessenp-cds thiessenp-cds linked a pull request Jul 5, 2024 that will close this issue
feat: Adds question label to error message #3963
Draft
@srtalbot srtalbot added the design Design task / work required label Jul 5, 2024
@srtalbot
Copy link
Contributor

srtalbot commented Jul 5, 2024

Thanks for the initial scoping Pete!

Added the user story above and flagged that it's ready for design input. Moving this back to the product backlog.

@srtalbot srtalbot added the 🚦 Severe Severe Impact Issue label Jul 5, 2024
@anikbrazeau anikbrazeau mentioned this issue Oct 7, 2024
Open
@anikbrazeau anikbrazeau mentioned this issue Oct 29, 2024
Open
@Abi-Nada
Copy link

Closing this issue as we have a duplicate card for error messaging + finalized content output in 4502

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility related issue App design Design task / work required 🚦 Severe Severe Impact Issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Adds question label to error message cds-snc/platform-forms-client
4 participants
@srtalbot @Abi-Nada @thiessenp-cds @jprince-cds