WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: forms and multiple aria-live regions

for

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

Regards,
Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist