Getting alerts to read after page refresh in IE and Firefox

Question

For accessibility purposes I need to make 'errors' that are displayed be read immediately after the page refreshes.

Currently I have role="alert" and tabindex="-1' on the div that contains the error. This works fine in Google Chrome, but it appears neither IE or Firefox support what I've done.

In Chrome the user is presented with a login page with both a username/password field. The user 'Submits' the form without filling out any information. The page refreshes with the error below and NVDA immediately reads the error. (I understand real time validation would be good, but that will be done at a later time)

<div id="notification_block">    
<div class="alert alert-danger" role="alert" aria-labelledby="alertHeading" tabindex="-1">  
    <h2 id="alertHeading">Error: Login Failed</h2>  
    <div>Invalid username/password combination. Please verify that your information is correct.</div>  
</div>             
</div>

Any ideas how I can get this to work in IE and Firefox?

Answer 1

Instead of using role="alert", I would just set the focus to the div on page load. This will cause it to reliably be the first thing that will be read out and it's a pretty common solution to this.

Answer 2

Add the aria attribute aria-live="assertive" to the error throwing div. This way all screen readers will be able to read all dynamically appearing contents.

Answer 3

The only way you can get this to work is to essentially delay the insertion of the content into the alert role until all the announcements for the page have been completed. There is no way to determine programmatically when this happens, so you should:

1. wait for page load,
2. set a timeout (say 500 ms)
3. when timeout fires, insert the content into the alert

This will increase the likelihood that the content is announced