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

Question

我有一个带有图标的 div 和一条消息，除非有人将鼠标悬停在它上面，否则它会在单击时执行操作。

对于视力正常的用户，单击该图标时会切换为复选标记，并且当该图标悬停在其上方时会更改消息。 但是，对于使用选项卡按钮的用户，不会显示该消息。

带有消息的 div 是一个 aria-live 区域，但由于它是隐藏的，屏幕阅读器不会宣布新消息。 尽管区域被隐藏，有没有办法宣布消息？

Answer 1

最简洁的答案是不。 如果您希望宣布其内容更改，则必须显示 aria-live 区域。

你可能会读到这个问题，我给出了一个小技巧：显示元素几秒钟，时间足够让屏幕阅读器阅读消息，然后再次隐藏。 但是，您必须至少显示消息 3-5 秒，因为如果您在仍在朗读该元素时隐藏该元素，则某些屏幕阅读器会在结束前切掉。

如果显示消息那么长时间是不可接受的，您仍然可以通过使用如下所示的一些 CSS 将其置于屏幕外。 请注意，许多框架已经具有类似 .visually-hidden、.sr-only 等具有类似代码的类。 如果您正在使用其中之一，请使用它们定义的内容。

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

``

Answer 2

我找到了一个更好的方法来处理这个问题。 首先，您必须始终在 DOM 中设置活动元素可见，而不是在 UI 中，然后，您需要更新textContent或innerHTML ； 下一步，只需setTimeout几毫秒（在我的情况下为 100 毫秒）或更长时间，然后清除里面的内容。 通过这种方式，屏幕阅读器仍将完整地阅读上一条消息。 如果在此期间必须附加新消息，您还可以clearTimeout 。

例子：

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

updateLiveRegion("my message");