如何在没有HTML标记的情况下向屏幕读取器隐藏CSS生成的内容

一个人将如何隐藏屏幕读取器中某些生成的内容（用于纯样式）？如果不使用诸如aria-hidden之类的HTML hacks？

，它是否有可能

例如。我使用代码content: '·';分开东西。我已经检查了Facebook＆amp;其他大玩家，但他们似乎都使用 aria-hidden的跨度：

<span aria-hidden="true">·</span>

这是否意味着目前不可能？

对于将来的参考，请注意，根据CSS内容模块3级文档：

生成的内容应可以搜索，可选并用于辅助技术。内容属性适用于语音和生成的内容以进行语音输出。

也说：

如果伪元素纯粹是装饰性的，并且其功能在其他地方涵盖，则将其设置为空字符串可以避免读取装饰元素。

这涉及::before和::after伪元素；/之后可以指示替代文本：

.expandable::before {
  content: "25BA" / ""; 
}

对于CSS2，您可以使用不发音的UTF-8元素，以确保不会宣布这些元素。

例如，当您使用代码时：

.bullet {
    content: "2022";
}

2022（子弹：•）宣布"子弹"使用NVDA，而其他代码（例如2023）（三角子弹：‣）却没有宣布

答案简短而简单：这是不可能的。

顺便说一句，CSS生成的内容可能会根据浏览器和屏幕读取器所使用的不同，因此您不确定是否会说话（不要使用它来提供重要的信息）。

此外，关于上述已经发布的答案：您不应该依靠以下事实：至少有三个原因，给定角色未被认可，因此也许被忽略了：

这是个人的观点，但我认为CSS生成的内容是一个概念缺陷：永远不要使用它，并且绝不应该发明它，根据基本分离原则：content = html，表现=CSS，Interactivity = JavaScript。

可悲的是现在为时已晚。

看来，屏幕读取器读出伪内容。

媒体查询"语音"（已弃用）和"听觉"也不支持，这将是一种"隐藏"的方法。伪内容。

这是大量屏幕读取器所支持的内容的很好概述（"预计失败"）：https：//www.powermapper.com/tests/tests/screen-readers/content/content/content/content/content/pp

相关内容