WebAIM - Web Accessibility In Mind

E-mail List Archives

Error message context for alert after hitting "submit"

for

From: Maia Miller
Date: Oct 10, 2022 10:52PM

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.