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

【问题标题】：Announce aria-live text change despite div being hidden尽管 div 被隐藏，但仍宣布 aria-live 文本更改
【发布时间】：2018-06-07 18:05:46
【问题描述】：

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

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

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

【问题讨论】：

标签： html css accessibility screen-readers

【解决方案1】：

简短的回答是否定的。如果您希望宣布其内容更改，则必须显示 aria-live 区域。

您可以阅读this question，我提供了一个小技巧：显示元素几秒钟，足够长的时间让屏幕阅读器阅读消息，然后再次隐藏。但是，您必须至少显示消息 3-5 秒，因为如果您在说话时隐藏元素，一些屏幕阅读器会在结束前截断。

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

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

```

【讨论】：

它需要在页面加载时位于 DOM 中（以获得最大的可靠性）；它不必是可见的。

【解决方案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");

【讨论】：