为屏幕阅读器突出显示内容

Question

我有一个关于突出显示大型文本文档中匹配的搜索词的问题。因此，用户进行搜索，匹配的术语会以背景色突出显示。这对视觉用户来说很好，但对于视障人士 users/screen readers 这没有用。

这是当前代码的示例：

 <span class="match">This is a match</span>

而 CSS 是：

 .match {background-color:yellow;}

所以问题是......您如何让屏幕 reader 宣布或标记这些条款与屏幕 reader 的用户匹配。

Answer 1

您可以为此使用 ::selection 伪 class。这是片段：

.match{
background-color:red;
}
.match::selection{

background-color:orange;
}

 <span class="match">This is a match</span>

Answer 2

如果您想吸引对特定比赛的注意，最简单的方法是 select 并集中注意力。屏幕阅读器跟随焦点，所以一般来说浏览光标应该跳转到相应的地方。不过，它并非始终有效，尤其是当您在页面加载时执行此操作。

<span id="match" tabindex="-1">Match</span>

document.getElementById('match').focus();

不要犹豫，将关注的元素扩展到严格匹配的字符串之外，以便用户可以有一些上下文。例如，将整个句子的重点放在单词匹配的地方，而不仅仅是单词。

您还可以创建一个 aria-live 区域：

<span aria-live="polite">match</span>

但它在这里看起来不太相关，因为您不会修改之后匹配的文本。 Aria-live 区域在页面加载时并不总是可靠地工作。

请注意，您可能希望使用 HTML5 元素 <mark> 来指示匹配项，这在语义上更好，在这里看起来非常合适。

Highlighting content for screen readers