WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions


From: Mark Magennis
Date: May 25, 2018 3:36AM

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


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


Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University