0

I have a dynamically updated notification section on my website inside my div class='notification'(the parent div is always there). when the success message appears, the NVDA screen reader in windows 10 edge does not read it. How can I make it read the message?

<div class="notification">
    <h6 tabindex="0" role="alert" aria-live="polite" aria-busy="true">Changes saved successfully.</h6>
    <button tabindex="1" type="button" data-testid="dismiss-button" aria-label="Dismiss">
       <span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
       </span>
    </button>
</div>
Kimaya
  • 1,210
  • 4
  • 14
  • 33
  • Which version of Edge browser and NVDA are you using? please check for a new version and update to the latest one. Besides, from the github NVDA forum, it seems that this is the [know issue](https://github.com/nvaccess/nvda/issues/4493), you could try to use role="document" on a node inside the dialog. If still not working, you could also post this issue on the [NVDA github forum](https://github.com/nvaccess/nvda/issues). – Zhi Lv May 04 '20 at 02:33

1 Answers1

0

Try to do something like this:

<div class="notification" aria-labelledby="my-message">
    <h6 id="my-message" tabindex="0" role="alert" aria-live="polite" aria-busy="true">Changes saved successfully.</h6>
    <button tabindex="1" type="button" data-testid="dismiss-button" aria-label="Dismiss">
       <span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
       </span>
    </button>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
C.Reimberg
  • 1