3

我正在实现一个搜索框。其中一种情况是必须公布结果的总数。为了实现这一点，我将<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;
}

但是，它仍然没有宣布。

还有另一种方法可以做到这一点吗？

4

2 回答 2

2

我最近遇到了类似的情况。您已经实现了一半的解决方案（将 重置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地区的信息。

于 2020-06-03T17:40:58.303 回答
0

我遇到了同样的问题。最后，如果将相同的字符串再次添加到 aira-live div 中，我会通过添加句点来修改字符串。

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

if (msg == $(".aria-live-div").text()){
    msg = msg + "."
}
于 2021-04-09T05:38:18.977 回答