WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions

for

From: Henry, Michael (IntelliDyne)
Date: May 24, 2018 12:59PM

I'm no expert and have struggled with proper form validation error messages, too, but we do something slightly different (if I understand you correctly), and I wouldn't mind input from others on our solution.


We Have the error summary box at the top of the form, hidden on default. When the form is submitted with errors/improper input, the error summary box appears at the top of the form, with an unordered list describing each invalid input (eg, "Address is required"). Each of those <li>s is a link to the specific <input> it refers to.

The Error Summary box has a role=alert.... but as I write this, it's dawning on me that it should probably also include "aria-live=assertive" (or "polite"?), and "aria-relevant= additions" as well.


And for this to work, the Error Summary box needs to be in the markup (not using display:none) on page load, so the browser and assistive technologies are aware of it.


Sorry that I seem to have raised more questions than answers. Maybe someone can help both of us?



---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Swift, Daniel P. < <EMAIL REMOVED> >
Sent: Thursday, May 24, 2018 1:30:23 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] forms and multiple aria-live regions

We are in the process of updating our forms. A typical form will be broken into fieldsets and at the top of each fieldset we have an empty unordered list which would contain a summary of errors. When the form is submitted, javascript runs and validates the form. If required fields are empty (for instance), the unordered list closest to the required field gets populated with a message indicating to the user that information is missing.

I was hoping that we could use aria-live on each unordered list but that doesn't seem to be working especially if the page is also showing/hiding content where we are already using aria-live.

Are we doing something wrong or is there a better solution?

Thanks!

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589