1

I have seen this working on some websites with exactly the same environment below, but it doesn't work for my own very simplified code, even if I copied the same markup with the same aria attributes from the working site.

Environment: Safari 9.1.2 + voice over on OS X El Capitan

I tried changing aria-atomic, aria-live, aria-relevant and it always read from the beginning of the live region every time I add some new content to the live region. Any ideas why it doesn't work and how to make it work?

html

<label for="speak-content"></label>
<input id="speak-content" type="text">
<button id="speak">add some stuff to read</button>
<div id="live-region" role="alert" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div>

javascript

$("#speak").on("click", function(event) {
    var liveRegion = $("#live-region");
    var content = $("#speak-content").val();
    var p = $("<p>").text(content);
    liveRegion.append(p);
});
Jason Lee
  • 357
  • 2
  • 10
  • Perhaps removing the `alert` role? – yuxhuang Dec 09 '16 at 09:38
  • This doesn't work and it still reads the whole thing, my goal is to make it just read the updates, but looks like even setting aria-atomic to "false" explicitly still doesn't work. – Jason Lee Dec 09 '16 at 15:39
  • 1
    Supposedly your code should work. If it still doesn't work in macOS Sierra, you might have hit a bug in VO/Safari. Maybe you could try it with a different browser combo, like VO/Chrome or VO/Firefox. – yuxhuang Dec 09 '16 at 18:08

1 Answers1

2

Try using aria-atomic=true. If aria-atomic is not defined, it defaults to false and a screen reader will read an entire live region. If you just want the screen reader to announce what has changed (such as in a countdown or results count) then use aria-atomic=true. Read more about aria-atomic at W3C.

Another note, though not your question: role=alert is the same as aria-live=assertive. Use role=status to match your use of aria-live=polite. Otherwise you are giving the browser conflicting information.

aardrian
  • 8,581
  • 30
  • 40
  • Thanks about the information of `role=status`. My intent is to make it just read the updates, and I have tried setting `aria-atomic` to "false" and "true" and just removing this attribute, none of these work and it always reads the whole live region regardlessly. I have tried using `role=status` and it still reads the whole thing. Please try it with my code with the given environment if possible, type "hello" in the input box and hit the button, then clean up the input box and type "world" and click the button again, it reads "hello world" instead of "world". – Jason Lee Dec 09 '16 at 15:37
  • This would be far easier if you used a Codepen or JSBin. Also, you are using jQuery, not JavaScript (minor point, but it is worth noting when it comes to compat issues). I think you are running into a bug. Remove everything but `aria-live=assertive`. You will have to test it as I do not have the same environment. http://s.codepen.io/aardrian/debug/jVpMoe – aardrian Dec 09 '16 at 17:36
  • This answer explains the use of `aria-atomic` the other way around, which is incorrect. One can go through [this link](https://wps.pearsoned.com/wps/media/objects/8905/9119211/timertest_aria_live_atomic.html) to understand how `aria-live` and `aria-atomic` works. I have not been able to use `aria-atomic="false"` successfully to announce only the updates. – Ritesh Jagga Mar 08 '22 at 11:41