如何从浏览器的搜索功能中排除HTML文本节点？

Question

是否有一些ARIA或其他方式来标记给定的HTML节点，以便在用户在页面上搜索文本时跳过（Ctrl + F / Cmd + F）？

用例：隐藏搜索中的可访问/后备文本

示例：在此页面上搜索单词down。您应该只在上一句中找到该实例，但Chrome会显示与此问题的答案一样多的搜索结果，加上一个，因为问题本身和每个答案都有一个＆＃34; d ... vote＆ ＃34; a链接文字。

这些搜索结果并未突出显示，看到＆＃34; 1中的X＆＃34;在搜索框中，没有任何可见的内容与用户搜索的内容相匹配。

Answer 1

不确定我是否理解正确，但如果您开发自己的应用，而不是黑客攻击源，可能使用填充了:before属性的CSS :after或content伪元素会有所帮助。

例如，当content属性添加时，Safari，Chrome和Firefox中找不到文本“Hello”：

.text:before {
    content: 'Hello';
}

Opera 12.x在页面上找到了这个词，所以如果它的支持对你有意义，那么这个解决方案就不行了。我也无法在任何版本的IE，移动浏览器和其他不经常的环境中测试它。

Answer 2

在示例中，您可以删除“向下投票”文本（将其替换为 ，空格或空字符串），因为a标记已包含title属性，目标是供屏幕阅读器使用。

只有使用像lynx这样的文本浏览器才能使用后备，这将忽略CSS。所以，你可以使用像

这样的标记

 <a href="#" title="Explicit alternative">
    <span class="hidden">Explicit alternative</span>
 </a>

在班级display:none

上设置hidden

如果您怀疑title属性是否足够，可以添加aria-label属性，但这不是必需的。