WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: David Engebretson Jr.
Date: Oct 11, 2022 1:38AM

I agree with Tim.
1. Set focus to the first error and tell the user what they need to do to remediate the error(s)
2. When the user tabs to the next error, tell the user what they need to do to remediate the error.
3. repeat step 2 until all errors are remediated and focus lands on the submit button again.

Cheers,
David


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Monday, October 10, 2022 11:26 PM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Error message context for alert after hitting "submit"

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
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Maia Miller
Sent: Monday, October 10, 2022 11:53 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Error message context for alert after hitting "submit"

Hi team,

I have a complex form with even more complex error validation. What we're after is making sure that the error message that gets read out by screen reader is contextual enough to be helpful.

Here are the facts:

* In this form, an error can be triggered by (1) tabbing away from a
field and leaving it invalid, or (2) hitting "Submit" when one or
more fields are invalid
* Assume it's possible for #2 to happen without #1 - like I said, it's
a complicated, weird form
* Error messages are shown in line for each field in error (as in,
there is no block at the top of the form that lists all the errors.
This is unfortunately not an option due to configuration).
* The error message is the same regardless of how it was triggered
(tabbing away vs "submit").

And here is the simplified code that we are working with:

(start)

<label for="id">...

<input id="id" aria-describedby="help-text" />

<div role="alert">

<span id="help-text">This field is required</span>

</div>

(end)

An error like "This field is required" is sufficiently descriptive if the user tabs away and is notified right away thanks to role=alert.
However, it is not enough context when a user hits "submit" and gets one or more messages like that.

My question is: how can we make sure the error message provides enough context when it is triggered by hitting "submit"? Note that the questions are very long, so replacing the word "This" with the label is not a viable option visually, I'm not sure what the experience would be for SR users.

I hope that was clear enough! Some guidance would be much appreciated - thanks!

Maia


--
*Maia Miller*, WAS (Web Accessibility Specialist) Accessibility Manager
(she/her)

AAP WAS small circular badge and horizontal name logo for International Association of Accessibility Professionals (IAAP) Web Accessibility Specialist (WAS) credential. To the left is a dark blue circle with three lines of centered white text that read: IAAP Certified WAS. There is a smaller light blue circle that surrounds the dark blue inner circle that designates the WAS credential color scheme. To the right, two lines of dark blue text. Top text reads Web Accessibility Specialist, second line reads International Association of Accessibility Professionals.
--
Catalyst IT - Expert Open Source Solutions www.catalyst.net.nz <http://www.catalyst.net.nz>;

Catalyst Logo

Catalyst.Net Ltd - a Catalyst IT group company CONFIDENTIALITY NOTICE: This email is intended for the named recipients only. It may contain privileged, confidential or copyright information.
If you are not the named recipient, any use, reliance upon, disclosure or copying of this email or its attachments is unauthorised. If you have received this email in error, please reply via email or call +64 4 499 2267.