CODEWITHSUNDEEP
javascripthtmlaccessibilitywai-ariascreen-readers
SaarlandProgger
SaarlandProgger

Reputation: 51

Screenreader read content again although the role log is used

i want to create a little chat application. I also want to use the screenreader to read the text to me. ( Continously updates should be read ).

So: It should be really easy by using the role "log".

<div id="canvas">
    <div id="messages" role="log">
        <ul id="test">
            <li>Row 1</li>
            <li>Row 2</li>
        </ul>
    </div>
</div>

But in my specical case I need to clear the parent div and creae the following content of it.

document.getElementById("canvas").innerHtml = "";

I noticed that if I fill the list again, that the screanreader will read all items again. But I will that the screenreader remebers the last state.

So I thought to cache the container like

let cache = document.getElementById("messages")
document.getElementById("canvas").innerHtml = "";
document.getElementById("canvas").append(cache);

But this also overwrite the state. I am using iOS VoiceOver. Is there a way to reach my special case? Or does someone has any ideas? Or is the only way to make sure that the parent will not be cleared?

Thank you a lot

Upvotes: 0

Views: 453

Answers (1)

QuentinC
QuentinC

Reputation: 14772

Short answer

That's simple: if you don't want existing content to be repeated, you shouldn't touch it. Append the new content instead.

If your framework replaces too many (useless) things, your framework is doing bad, or it has to be improved.

Longer answer

How screen readers and ARIA live regions work

The screen reader basically monitors changes occurring in the DOM tree, in the regions it has been told to look at (the so called ARIA live regions). This is how it works in most, if not all, screen readers, browsers and OS.

Therefore, if you remove everything from one element and add it again, even it the actual text content hasn't changed, it will be read again.

Look at the screen reader point of view: in fact, it isn't desirable to make a precise analysis of what has been changed exactly in place, as you describe.

For example, Google Chrome Windows had that kind of problem in the past: if you wrote "It was cool" and than replaced by "It was cold", there were a tendency to have only "ld" read, which, of course, doesn't make sense as such. The precise analysis was probably made by the browser before communicating to the screen reader, and not in the screen reader, because it worked fine in other browsers.

But think deeper: what should be read in such a case ? Only the new word "cold" ? The entire sentence ? The paragraph ? The whole element ? Even if it's several paragraphs long ? If the content is exactly the same, has the text to be repeated, or nothing should be spoken at all, as if nothing happened ?

The answers depends a lot on the context and the screen reader can't decide to take a constant behavior once for all. So, it's simpler to just follows what happens in the DOM, and hope that the designer will update only what makes sense at the right time.

Aria-atomic and aria-relevant

In theory, it's supposed to work like as follows, but there are still several screen readers that don't totally respect these two attributes correctly.

  • If aria-atomic is set to true, the whole content of the live region has to be read again. If set to false, only changed content has to be read.
  • ARia-relevant indicates what should be read: additions (new content), removals (deletions), or both.

Note in particular that a replacement is nothing else than a removal followed by an addition, and hence, it doesn't help to solve your problem.

Upvotes: 2

Related Questions