简体   繁体   中英

accessibility aria-live not working when loading a page

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM