WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions

for

From: Birkir R. Gunnarsson
Date: May 25, 2018 9:17AM

Make sure to place aria-live on the parent of the element that gets
displayed, not on the eleent itself.
bad:
<div aria-live="polite" style="display: none;">There were errors</div>
Good
<div aria-live="polite">
<div style="display: none;">there were errors</div>
</div>

Screenreaders are instructed to announce live region content when it
is added or changed.
In the bad case the content isn't changed,only the visibility of the element.
Some screen readers may announce it regardless, but I think your
results will not be reliable.
In the second case, updating the visibility of the child element
effectively adds content to the live region, so it should reliably be
announced.

I'll get to the code pends over the weekend, today is unexpectedly busy.



On 5/25/18, Swift, Daniel P. < <EMAIL REMOVED> > wrote:
> Another excellent point - thanks, Mark!
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Mark Magennis
> Sent: Friday, May 25, 2018 8:52 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] forms and multiple aria-live regions
>
> Dan,
>
> When using the live region for error messages when a field loses focus, make
> sure the warning text explicitly refers to the field it relates to.
> Otherwise, the user may think it applies to the field they have just tabbed
> into, since it will be read in conjunction with the screen reader announcing
> that field. E.g.
>
> "name"
>>TAB
> "email", "you must fill in this field"
>
> Where the error was actually referring to the name field.
>
> So the warning should be "you must fill in the name field".
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Swift, Daniel P.
> Sent: 25 May 2018 13:11
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] forms and multiple aria-live regions
>
> Thanks to everyone for the feedback. One thing that I neglected to mention
> is that we are also validating the individual field when the field losses
> focus. In retrospect, this is probably the point in which we need to use
> aria-live ... not at the end (client-side). I am going to take this
> approach instead.
>
> Birkir -- you raise an excellent point regarding screen magnification which
> I hadn't considered. I look forward to your Codepen.
>
> Thanks again, everyone!
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Mark Magennis
> Sent: Friday, May 25, 2018 5:37 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] forms and multiple aria-live regions
>
> Hi Daniel,
>
> I think there is a better solution. You don't need to use aria live regions
> for error warnings that appear after submitting the form. Only for errors
> that appear dynamically, after moving away from a field.
>
> For submission error warnings, a general warning, e.g. "There are errors on
> this form. Please fix them and resubmit the form." (or something nicer), can
> be placed on the page above the form (not within it). On page load, focus
> can be moved to this warning message, so it is read immediately by screen
> readers and is (probably) within the viewport for users using screen
> magnification.
>
> For each field that has an error, the specific warning message can be placed
> adjacent to the field and included within the field's label using
> aria-labelledby (or aria-describedby), to ensure it is announced by screen
> readers. It should also be hidden to AT using aria-hidden="true" so it is
> not read again by a screen reader in browse mode (while arrowing through the
> page). All fields that do not have errors can be given tabindex="-1" and
> they and their labels can be hidden to AT using aria-hidden="true". This is
> to make it quick for keyboard and screen reader users to correct the errors
> and resubmit the form without having to tab through all the fields (some
> users don't know they can hit ENTER to submit the form and it doesn't work
> on some field types anyway).
>
> Regards,
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Swift, Daniel P.
> Sent: 24 May 2018 18:30
> 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
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.