1

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.

Nitesh Rana
  • 405
  • 1
  • 6
  • 18
  • 1
    `aria-live="polite"` would need user to be idle to read all the error messages. I think `assertive` would break the user flow and read all the message. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions – Anirudh Mangalvedhekar Nov 05 '18 at 14:05

1 Answers1

1

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.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
  • if i dont use role="alert" then the AT is not reading my message. – Nitesh Rana Nov 06 '18 at 05:35
  • then you have a different coding problem. i use `aria-live="polite"` and it works in all the browsers and with all screen readers. i've never had a problem with it. – slugolicious Nov 06 '18 at 09:03
  • Thanx. aria-live actually worked without using alert. Thanx for info. Really helped me. – Nitesh Rana Nov 06 '18 at 14:18
  • then i don't understand your first comment regarding my answer. you said it didn't work without the alert, and now you say it does work without the alert. what changed? – slugolicious Nov 07 '18 at 03:28
  • even multiple aria-live="polite" do not seem to be buffered https://ux.stackexchange.com/questions/72271/screenreader-multiple-live-regions – gaurav5430 Jun 07 '19 at 06:57