即使文本相同，也要在 aria-live 下重新宣布 <p>

Question

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

预期场景：

用户输入字符串 --> 回车 --> 结果出现并宣布字符串。

边缘情况是用户按两次回车。

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

我尝试在输入点击时使用它：

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 属性here 的更多信息。

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

Answer 2

我遇到了同样的问题。我修改了字符串，加上句号，最后，如果相同的字符串再次添加到aira-live div。

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

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