javascript - 即使文本相同，在 aria-live 下重新宣布

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

还有更多关于 aria-live的信息地区 here .