[Dev] [508] Error messages associated with respective form fields

[tbolt]

As noted in the 508 compliance review:

Error messages:
"Error message should be associated with the form field so that screen reader can render it every time when that form field receives keyboard focus.

Screen reader should also render error description when a user press “Continue” button and try to proceed further without correcting the error for example- Error: Start Date Error: End Date

For the first issue we should verify that we are using role="alert" on the error hints

For the second issue we will be addressing it via #2346 and #2405

The second issue should be investigated further as this is not clear how we would handle this in our app. As well, this could require significant effort.

This task is done when…

This could include:

• [ ] Form fields are using role="alert" as specified in design.cms.gov to render error messages to the screen reader
• [ ] Second issue investigated and proposed fix/solution documented

[tbolt]

Update 8/3/22- This ticket is old and predates our new error messages/validations. For the issue concerning role="alert" being attached to error hints. While we may have had a specific issue in the past, this no longer seems to be the case. I will walk through our new error messages and verify that they are a.) not throwing any WAVE errors b.) working as expected with a screen reader.

Concerning this:

Screen reader should also render error description when a user press “Continue” button and try to proceed further without correcting the error for example- Error: Start Date Error: End Date

I believe we decided not to block users from moving through the app based on invalidations. Instead we rely on the admin check to verify that the APD is administratively complete before submitting. Does that sound right @beparticular @jeromeleecms ?

[tbolt]

Evaluating all fields that currently have error messages, I am not finding any issues related to 508/accessibility.

Here is a demo video of how the error messages are being read when fields are removed from focus- https://images.zenhubusercontent.com/113234315/3569d322-aeef-4a7c-a9c1-b0f0d057da43/2.mov

The video shows that the error message is read when focus is lost. As well, when returning to the field it notes that the field is invalid and reads the error message again.

Testing with the WAVE plugin, it is not flagging any errors or warnings on our form elements when they have an error state- This is likely because we are benefiting from the cms design systems aria-labels and already accessibly components.

Given the above, I don't think there is any further work needed to address this tickets original concerns. Our error messages so far are working as intended with no accessibility concerns.

Fields tested- Many of the subform fields were tested with a screen reader All subform fields were tested with WAVE The APD Overview rich text fields were tested with both a screen reader and WAVE

[mirano-darren]

Great assessment Ty, fully agree with what you outlined here. This ticket is pretty old, so it seems like the problems explained here have been resolved without directly referencing this issue.

[thetif]

@jeromeleecms do you agree that we can close this ticket?

[jeromeleecms]

Yes - let's close.