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

Question

如何从屏幕阅读器隐藏CSS某些生成的内容（用于纯样式）？是否可以不使用像aria-hidden这样的HTML黑客？

E.g。我使用代码content: '·';来分隔内容。我查了一下facebook＆amp;其他大玩家，但他们似乎都使用aria-hidden的跨度：

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

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

Answer 1

供将来参考，note that according to CSS 3 documentation:

  

生成的内容应该是可搜索的，可选择的，并且可用于辅助技术。内容属性适用于语音，必须为语音输出呈现生成的内容。

它还说：

  

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

这涉及::before和::after个伪元素;在/：

之后可能会显示替代文字

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

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

例如，当您使用代码时：

.bullet {
    content: "\2022";
}

\2022（项目符号：•）宣布＆＃34; bullet＆＃34;使用NVDA而另一个代码如\2023（三角形子弹：‣）不宣布任何内容

Answer 2

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

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

此外，关于上面已经公布的答案：你不应该依赖这样一个事实，即某个特定的角色无法识别，因此可能会被忽略，至少有三个原因：

• VoiceOver有时会说“不合作”;
• 也许明天你的未被承认的角色会被识别
• 用户可以在发音词典中注册特殊字符

这是个人的观点，但我认为CSS生成的内容是一个概念缺陷：根本不应该使用它，根据基本分离原则它永远不应该被发明：Content = HTML，Presentation = CSS，Interactivity = JavaScript。

可悲的是现在已经太晚了。