加载页面时，可访问性aria-live无法正常工作

Question

I am trying to get my screen reader to read the message whenever my page loads with a message. Below is the code that I have used. I could read the message when I hover on the text. But, for some reason I cannot get the screen reader to read my message on page load . Please suggest if there is something that I need to do.

<div class="bannerError">
    <div class="bannerError_image"></div>
    <span class="bannerError_text" aria-live="assertive">Please enter your name
    </span>
</div>

Answer 1

The live region container must be present in the HTML at the time of page load, however it should not contain any content initially.

Only after the page has loaded will the contents of the live region be monitored for updates. Adding content to the live region is typically accomplished via JavaScript.

You may want to take a look at the WCAG page for aria-live usage: W3C - Using ARIA role=alert or Live Regions to Identify Errors

Also, Terril Thompson has a pretty good live region testing page that illustrates some of the different ways that aria-live can be implemented.