尽管隐藏了 div，但仍宣布 aria-live 文本更改

Question

I have a div with an icon and a message which is hidden unless someone mouses over it, that does an action when clicked.

For sighted users, the icon switches to a check mark when clicked, and the message is changed when the icon is hovered over. For users that use the tab button however, the message isn't displayed.

The div with the message is an aria-live region, but since it is hidden, the screen reader will not announce the new message. Is there a way to announce the message despite the region being hidden?

Answer 1

The short answer is no. an aria-live region must be visible if you want its content changes to be announced.

You may read this question where I give a small trick: show the element a few seconds, long enough to let the screen reader read the message, and then hide again. However you must show the message at least for 3-5 seconds because some screen readers cut of before the end if you hide the element while it is still being spoken.

IF showing the message for that long is unacceptable, you can still put it off-screen, by using a little CSS like below. Note that many frameworks already have classes like .visually-hidden, .sr-only, etc. with a similar code. If you are using one of them, use what they define.

.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}

```

Answer 2

I've found a better way to handle this issue. First you'll have to always set your live element visibile in DOM, not UI, and after that, you'll need to update the textContent , or innerHTML ; next step, just setTimeout for a couple of milliseconds (100ms in my case) or more, and after that just clear the contents inside. In this way the screen reader will still read the previous message entirely. You can also clearTimeout if new messages has to be appended in the meantime.

example:

function updateLiveRegion(message) {
    const elem = document.getElementById("my-id");
    elem.textContent = message;
    clearTimeout(myTimeout);
    myTimeout = setTimeout(() => {
        elem.textContent = "";
    } , 1000);
}

updateLiveRegion("my message");