IE role="alert" is not read on page load

Question

I'm adding accessibility support for my project, and recently find out JAWs doesn't read out element with role="alert" if the element is loaded with page using IE11.

I have a page that submits inputs to server and receive response with error span if no data is available. The error span has role="alert" assigned. The error is read immediately after page load when using chrome, but IE seems to ignore the error.

I can't set the focus to the error span because the focus need to be set to the error caused field.

I'm using JAWs 2019 with IE11.

For a testing example, Simplly open a HTML document using IE11 with content:

<h1>title</h1>
<span role=alert>this is an alert</span>

In my testing the span is not read out immediately.

Update: JAWs 2019 is working fine with other alert elements in IE11 in my testing. It's only when I have an alert element thats loaded with the page when I see a problem. JAWs should narrate the alert element after the element is loaded. Chrome is working as expected.

Possible duplicate of Jaws 16 not reading "alert" role in IE 11 — Roy

slugolicious slugolicious · Accepted Answer · 2019-03-14T08:41:19

It doesn't sound like you are using aria-live correctly. It's not supposed to be read on page load. If there are some browser and screen reader combinations where it is read, then that combination is not following the html and aria spec.

And just to clarify, if you use role="alert", that gives you an implicit aria-live="assertive". So this question is really about aria-live.

An aria-live region should only be read automatically by a screen reader if you change the contents of that region. If you insert text into your region, or add new DOM elements to that region, they will be read when the changes are made. You can control what types of changes are read with aria-relevant. Text changes and DOM additions are the default. You can also control how much information is read inside the live region with aria-atomic.

@Roy says in the comment section that there might be a duplicate question. It's not the same question because the other question is using aria-live correctly.

What you really want to do is have an existing live region on your page, such as

<div role="alert" id="someID"></div>

and then the <span> that is returned to you from the server does not need role="alert". It can just return a <span> with the error message contained within it

<span>this is an alert</span>

and then you have to inject this message into the <div>

<div role="alert" id="someID">
  <span>this is an alert</span>
</div>

Now you'll hear "this is an alert" read by the screen reader.

IE role="alert" is not read on page load

1 Answers