WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions

for

From: glen walker
Date: May 24, 2018 1:41PM

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).

Glen



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
> 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
>
> > > > > > > > >