WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mark Magennis
Date: Oct 12, 2022 8:38AM

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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Maia Miller
Sent: Tuesday 11 October 2022 05:53
To: <EMAIL REMOVED>
Subject: [EXTERNAL] [WebAIM] Error message context for alert after hitting "submit"

[You don't often get email from <EMAIL REMOVED> . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]

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.