Announce aria-live text change despite div being hidden

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?

score 7 · Accepted Answer · answered Jun 07 '18 at 19:01

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;
}

```

It needs to be in the DOM on page load (for maximum reliability); it does not have to be visible. — buckthorn, Apr 12 '21 at 20:35

score 1 · Answer 2 · answered Nov 06 '18 at 09:06

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");

Announce aria-live text change despite div being hidden

2 Answers2