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

Question

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

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

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

Answer 1

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

您可以阅读 this question 我在其中给出了一个小技巧：显示元素几秒钟，足够长的时间让屏幕 reader 阅读消息，然后再次隐藏。但是，您必须至少显示该消息 3-5 秒，因为如果您在该元素仍在朗读时隐藏该元素，则某些屏幕 reader 会在结束前被截断。

如果不能接受显示那么长时间的消息，您仍然可以将其置于屏幕外，方法是像下面这样使用一些 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 毫秒）或更长时间，然后清除其中的内容。这样，屏幕 reader 仍会完整地读取上一条消息。如果必须同时附加新消息，您也可以 clearTimeout。

示例：

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

updateLiveRegion("my message");

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

Announce aria-live text change despite div being hidden

html

css

accessibility

screen-readers