Accessibility in case of multiple errors

user_7468522 0
Viewed 1385

I have a angular component named error-component. It gets initialized every time a service throws error. Now when there is one error only screen reader reads the error, but in case of multiple errors the screen reader reads only one error and that is the last error. Errors are coming from service side. Sometimes service throws multiple errors.

<div aria-live="polite" role="alert">
<error-component></error-component>
</div>

So when there is one error, screen reader will read it, but in case of multiple errors screen reader reads the first one only.

wai-aria css html javascript
1 Answers

I mentioned this at the beginning of my answer on your previous question regarding specifying role="alert" and aria-live="polite".

Your code sample is specifying conflicting information. Using role="alert" gives you an implicit aria-live="assertive" but you are also specifying aria-live="polite". I would recommend removing role="alert". Having aria-live="polite" is sufficient.

So the results are unkown when you specify two different values for aria-live. Assuming aria-live="assertive" takes precedence, the spec for assertive says:

User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.

So if you have multiple assertive messages, the previous assertive message might be cleared out by the next assertive message. (It's up to the individual assistive technology to decide. For example, JAWS might clear the previous message but NVDA might not.)

If you make your error message aria-live="polite", then you might hear all messages. It depends when the page refreshes and when the screen reader buffer updates. If you update the message in <error-component>, and the screen reader buffer updates, and then you update the message in <error-component> again and the screen reader buffer updates, then when there's a pause in the user's interaction, the queued up error messages should be read. But again, that might be a timing issue.

What happens visually when you have multiple error messages? Can you see all the messages at the same time, or do you briefly see one message and then it's overwritten by the next message?

If you create multiple visual <error-component> elements so that you can see all the messages at the same time AND you make the container of those components an aria-live="polite", then you should hear all the errors.

user_767140
Related