在咏叹调-live下重新宣布一个<p>，即使文本是相同的。

Question

我正在实现一个搜索框。其中一个方案是必须公布结果的总计数。为了达到这个目的，我把 <p> 标签内 aria-live 地区，并按预期宣布。

预期的场景。

用户输入一个字符串--&gt；点击回车键--&gt；出现结果并公布字符串。

边缘情况是，如果用户按了两次回车键。

如果用户在没有任何改变的情况下再次按下回车键，那么什么也不会更新，因为计数还是一样，什么也不会公布。

我尝试在回车点击时使用这个方法。

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 地区 此处.