Search code examples
htmlaccessibilityalertwai-ariascreen-readers

role="alert" is only working for the first time


I have added the following piece of code to make screen reader read the alert message:

<aside aria-live="assertive" aria-atomic="true" role="alert" ng-show="login.hasWarning();" translate="{{message}}"></aside>

<form>
  <!--form content-->
</form>

It works perfectly for the first time, however when I commit the error again, it doesn't reads the updated error message again. What am I missing?


Solution

  • Are you pushing the same error message again? As in, pushing "Error 101" the first time, then pushing "Error 101" the second time?

    If so: JAWS/VoiceOver/NVDA only read updates to the live region. If you replace text with identical text, it doesn't count as an update. Replace the text with an empty string before pushing the new error message. Note that JAWS may say "Blank", depending on the browser and user settings.