E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Maia Miller
Date: Mon, Oct 10 2022 10:52PM
Subject: Error message context for alert after hitting "submit"
No previous message | Next message →

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.

From: tim.harshbarger
Date: Tue, Oct 11 2022 12:25AM
Subject: Re: Error message context for alert after hitting "submit"
← Previous message | Next message →

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

From: David Engebretson Jr.
Date: Tue, Oct 11 2022 1:38AM
Subject: Re: Error message context for alert after hitting "submit"
← Previous message | Next message →

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

From: Mark Magennis
Date: Wed, Oct 12 2022 8:38AM
Subject: Re: Error message context for alert after hitting "submit"
← Previous message | No next message

Hi Maia,

I think you're not correct in saying that an error like "This field is required" is sufficiently descriptive if the user tabs away and is notified right away thanks to role=alert.

Usually (always?) the screen reader will announce the alert after reading the name of the field that the user has tabbed into. So for example, when tabbing from a name field to an address field you would hear "Address this field is required". This sounds like it means "address field is required" when in fact it means "name field is required".

Mark