WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Error message summaries, alerts and focus

for

From: Nick Bromley
Date: Aug 8, 2023 2:32AM

Ah yes, of course.



So I’ll see if just placing focus on the error message on page reload will give a decent experience across our browser-SR test combination



The mac issue needs additional investigation.



Thanks



From: Steve Green < <EMAIL REMOVED> >
Sent: Monday, August 7, 2023 6:20 PM
To: Nick Bromley < <EMAIL REMOVED> >; <EMAIL REMOVED>
Subject: RE: Error message summaries, alerts and focus



With server-side validation, the error message is not a status message because it is not a change of content. Or it could be regarded as a change of content that is part of a change of context i.e. the new page loading. Either way, it does not meet the definition of a status message. A live region would therefore not be appropriate.

https://w3c.github.io/wcag/guidelines/22/#dfn-status-messages



I’ve no idea about the macOS issue.



Steve





From: Nick Bromley < <mailto: <EMAIL REMOVED> > <EMAIL REMOVED> >
Sent: Monday, August 7, 2023 5:45 PM
To: <mailto: <EMAIL REMOVED> > <EMAIL REMOVED>
Cc: Steve Green < <mailto: <EMAIL REMOVED> > <EMAIL REMOVED> >
Subject: Re: Error message summaries, alerts and focus



In the example I’m working with, there’s no client-side validation. With server-side validation, would you not also just pick one or other approach? I have thought about not moving focus, but there are a few UI controls that appear before the start of the form so these would need to be manually bypassed each time an error is triggered (it’s a relatively simple sign-in form with three input fields).



We have a related issue in that, on MacOS, once we move focus to the error message div, it’s bouncing straight off to the first input field in the form, where VoiceOver automatically starts reading its details and autofill options, cutting off the alert almost immediately. I’m not sure if this is some JS timing issue, a Safari quirk, or something else.





---

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