我正在实现一个搜索框。其中一种情况是必须公布结果总数。为了实现这一点，我把 <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;
}
但是，它仍然没有宣布。
有没有另一种方法来实现这一点？
最佳答案
我最近遇到了类似的情况。您已经实现了一半的解决方案(将 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 .
关于javascript - 即使文本相同，在 aria-live 下重新宣布 <p>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61068156/