I'm creating a from that has validation errors show below the related inputs. To make the form more accessible I have added aria-lives to div that will hold the error message. With having more than one aria-live will this make it worse for the users?
<div
id="awesome-id">
<label for="awesome-id--input">
This is a label
</label>
<input
type="tel"
id="awesome-id--input"
required>
<div
role="region"
aria-live="polite"
id="awesome-id--error-message">
</div>
</div>
<div
id="another-id">
<label for="another-id--input">
This is another label
</label>
<input
type="tel"
id="another-id--input"
required>
<div
role="region"
aria-live="polite"
id="another-id--error-message">
</div>
</div>
You can have multiple aria-live containers - especially since they are “polite”, they should wait until it’s quiet to give you the feedback. Whether this is also a good experience for your users, you should simply test with a screen-reader (or, preferably, conduct user-tests).
However, I would remove the role=“region”. This is the specification of the Region element at MDN Web Docs:
The region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page.
Landmarks like Region allow the user to quickly navigate to them. But adding all error messages to that list of landmarks would just muddy it in my opinion. Instead you should consider adding role=“alert”.
Also, make sure that the error container having aria-live is present at the page on load - even though it is empty. Otherwise some browsers will not know to listen for changes in it.
Lastly, remember to also toggle aria-invalid=“true/false” on the input to provide the screen-reader with proper feedback.