WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Error message summaries, alerts and focus

for

From: Steve Green
Date: Aug 7, 2023 9:57AM

The GOV.UK Design System philosophy is that JavaScript will not be used unless it is unavoidable (such as in an accordion) or at least improves the user experience.

https://design-system.service.gov.uk/patterns/validation/#client-side-and-server-side-validation says “Only add client side validation if you find a user need for it.”

However, within the gov.uk website you will find all sorts of different coding techniques because the website has been built by many different development teams over many years. You therefore can't use the website as an oracle.

The design pattern at https://design-system.service.gov.uk/components/error-message/ does not use client-side validation and assumes the page will reload after an error.

From a user experience perspective I agree with Patrick's advice to either use a live region or move the focus, but not both, when doing client-side validation. However, are we sure this conforms with WCAG SC 4.1.3? The error message cannot be "programmatically determined through role or properties" in the absence of a live region. Or does SC 4.1.3 not apply since the focus is being moved to the error message?

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Nick Bromley
Sent: Monday, August 7, 2023 3:14 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Error message summaries, alerts and focus

They don’t expressly state in their design system they use aria-live regions, but they do add role=”alert” to their error message parent divs on the site.

Gov.uk usually do extensive user testing of their design patterns so I’d be interested to hear what feedback this produced.



Nick

- - -

Nick Bromley

Director & Accessibility Consultant

Red Kite Digital Accessibility Ltd

-------

To add on to what Patrick said, in addition to the uk.gov error summary

pattern, if you look at their error message pattern,

https://design-system.service.gov.uk/components/error-message/, and

validation pattern,

https://design-system.service.gov.uk/patterns/validation/, they don't say

anything about announcing the error message when it appears. That is, they

are not recommending the use of aria-live. So gov.uk is not doing both a

live region and moving the focus.



The error summary pattern also recommends putting the summary at the very

top of the page. I'm not sure that's always the best idea. If the main

purpose of your page is a form, then it makes sense. But if you have a lot

of information on your page and a form is only a small part of it, and that

form is further down the page, having the error summary at the top and

seemingly unrelated to the page might be confusing. On the other hand, if

you have some pages that put the summary at the top (in situations where it

makes sense) and other pages that put the summary near the form, then you

have an inconsistent pattern/location and that also might be confusing.



They also recommend pre-pending the page <title> with "error". That's an

interesting idea.



On Mon, Aug 7, 2023 at 4:58 AM Patrick H. Lauke < <EMAIL REMOVED> >

wrote:



>

> I would strongly suggest doing *either* live region announcement, *or*

> moving focus...not both.

>

> P

> --

> Patrick H. Lauke

>

>