Question

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

对于有视力的用户，图标会在单击时切换为复选标记，并且当图标悬停时，消息会发生变化。但是，对于使用标签按钮的用户，信息不会显示。

带有消息的div是一个咏叹调生活区域，但由于它是隐藏的，因此屏幕阅读器不会宣布新消息。尽管该地区被隐藏了，有没有办法宣布这条消息？

Answer 1

简短的回答是否定的。如果您希望宣布其内容更改，则必须显示咏叹调生活区域。

你可以阅读this question我给出一个小技巧：显示元素几秒钟，足够长的时间让屏幕阅读器阅读信息，然后再次隐藏。但是，您必须至少在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几毫秒（在我的情况下为100ms）或更长时间，然后清除里面的内容。这样，屏幕阅读器仍将完全读取前一条消息。如果同时需要添加新消息，也可以clearTimeout。

示例：

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

updateLiveRegion("my message");

尽管div被隐藏，但宣布咏叹调实时文本更改

2 个答案: