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?

score 2 · Answer 1 · answered Oct 12 '16 at 08:50

2

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.

answered Oct 12 '16 at 08:50

Fiona - myaccessible.website

14,481
16
82
117

Thank you. This is what I ended up doing and it seems to be working well across all browsers. – Blobula Oct 12 '16 at 15:41
Are there any WCAG standards that say errors shown after form post explicitly need to be read, as opposed to letting the user navigate through the refreshed page? There's guidelines that apply to dynamically shown errors(client side validation) but I couldn't find anything that was worded such that it would apply to errors shown after a page refresh. I tend to try and not implement forced focus changes because the WCAG says not to change focus unexpectedly. – AaronLS Dec 20 '19 at 19:45

score 1 · Answer 2 · edited Aug 29 '18 at 12:31

1

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.

edited Aug 29 '18 at 12:31

Roy Scheffers

3,832
11
31
36

answered Aug 29 '18 at 11:54

kishore s

11
1

no need for `aria-live="assertive"` if `role="alert"` is being used. – slugolicious Aug 29 '18 at 20:29

score 0 · Answer 3 · answered Oct 08 '16 at 22:36

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:

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

This will increase the likelihood that the content is announced

Getting alerts to read after page refresh in IE and Firefox

3 Answers3