WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions


From: Birkir R. Gunnarsson
Date: May 24, 2018 7:12PM

I think this set up is less than ideal. The errors may be located
farther away from the invalid input fields making it difficult for
people using screen magnification to discover them.

It is better design to place the error message inline with the invalid
field and connect the two using aria-describedby (make sure only to do
this when the error message is visible).
That being said, you may be too far along in the process to change it now.
If you stick with your setup the key is to place focus on the first
error message when it is displayed rather than using live regions.
Ideally the error message should be a link to the associated input
element, making it faster for users to get to it.
I created a side-by-side comparison the techniques using HTML5 validation.
I need to upload it to Codepen, I'll try to fit that into my schedule
tomorrow and post back to this thread with links.

On 5/24/18, Jonathan Avila < <EMAIL REMOVED> > wrote:
> 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.
> Jonathan
> -----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).
> 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
>> 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
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >

Work hard. Have fun. Make history.