Accessibility - Error message for missing fields

[jprince-cds]

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:

Additional context

Reported in Freshdesk ticket 18068.

[thiessenp-cds]

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]

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

[thiessenp-cds]

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]

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

[srtalbot]

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.