WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions


From: Jonathan Avila
Date: May 24, 2018 6:13PM

In my experience use of role alert may cause screen readers to announce content outside the current tab. This can be problematic when the user is on another tab and ARIA alerts are fired that are not emergencies.


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Thursday, May 24, 2018 3:42 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] forms and multiple aria-live regions

Michael, if you have role="alert" then you already (implicitly) have aria-live="assertive". You don't need to add it. And if you don't specify aria-relevant, the default is "additions text", so you're ok there too. I like how you have your errors organized, with the list items being links to the field that's in error. That's what I do too. But I try to limit my use of role="alert" or aria-live="assertive" because if you have multiple live areas being updated, it's possible an assertive message can clear the other assertive messages (according to the spec). I rarely have anything, including error messages, just just have to be read immediately. Usually aria-live="polite" is sufficient.

Daniel, the problem you're seeing/hearing *might* be caused by multiple assertive areas, but that's just a guess. It's possible one assertive message is clearing the others. You could try a polite region to see if that helps. Also, I'm not sure on the timing of hidden objects and aria-live, in that if you update a live region while it's hidden, and then unhide it in the next line of javascript, if that'll work. You could try unhiding it first, then updating the live area (if you're not doing that already).


On Thu, May 24, 2018 at 12:59 PM, Henry, Michael (IntelliDyne) < <EMAIL REMOVED> > wrote:

> 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
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >