WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Error message context for alert after hitting "submit"

for

From: tim.harshbarger
Date: Oct 11, 2022 12:25AM

So this is one possible solution.
First, I would programmatically associate the error message with the related field. Looking at the code you included, I would likely give the error message an ID and then add that ID to the beginning of the list of ID's in the aria-describedby attribute.

When the user tries to submit the form, I would display the errors and then move keyboard focus to the first field with an error.

Personally, I would not have all the error messages announce when the user clicks the submit button. Maybe, I might use a live region to announce the total number of errors in the form--but I would just display the error messages, make sure they are programmatically associated with the related fields, and then move focus to the first field with an error--letting the screen reader announce the label, role, and error message when focus is moved there.

To suppress all the error messages being read on submit, I might try temporarily adding aria-live="off" to all the elements with role="alert" while the messages are being initially added as children of those elements.

Thanks,
Tim
Tim Harshbarger