重新宣布一个<p>咏叹调直播，即使文本相同

Question

我正在实现一个搜索框。其中一种情况是必须公布结果的总数。为了实现这一点，我将<p>标签放在aria-live区域内，它会按预期宣布它。

预期场景：

用户键入一个字符串-->点击回车-->结果出现，并宣布字符串

边缘情况是如果用户点击enter两次。

如果用户在没有任何更改的情况下再次按下回车键，则不会更新任何内容，因为计数仍然相同，也不会宣布任何内容。

我试着在输入点击时使用这个：

if (document.getElementById("header")) {
const currentText: string = document.getElementById("header").innerHTML;
document.getElementById("search-header").innerHTML = "";
document.getElementById("search-header").innerHTML = currentText;
}

但是，它仍然没有宣布。

有其他方法可以做到这一点吗？

Answer 1

我最近遇到了类似的情况。您已经实现了解决方案的一半(将innerHTML重置为空字符串，然后将其设置为currentText(。解决方案的另一半是将aria-relevant属性设置为all。

默认情况下，aria-relevant属性设置为additions text，但这会忽略removed选项。由于您需要屏幕阅读器来获取对空字符串的更改(删除文本时(，因此需要将属性设置为all(与additions text removed相同(。

作为一种最佳实践，aria-relevant属性通常应该保持不变，但我还没有找到其他方法让屏幕阅读器发出两次相同的通知。

在您的情况下，我还会将aria-live属性直接添加到具有id="search-header"的元素中。它应该看起来像这样：

<h6 id="search-header" aria-live="polite" role="status" aria-relevant="all">
X items found
</h6>

您可以在此处阅读有关aria-relevant属性的更多信息。

这里还有更多关于aria-live区域的信息。

Answer 2

我也遇到了同样的问题。我修改了添加句点的字符串，最后，如果相同的字符串再次添加到aira livediv中。

我将新的文本值与标记中现有的文本值进行了比较，如果值相同，则在传入字符串中添加句点(.(。

if (msg == $(".aria-live-div").text()){
msg = msg + "."
}