WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions

for

From: Mark Magennis
Date: May 25, 2018 6:51AM


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