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

Question

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

例如，我使用代码content: '·';来分离东西。我检查了 facebook 和其他大玩家，但他们似乎都使用 span aria-hidden：

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

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

Answer 1

对于将来的参考，请注意根据 CSS 3 文档：

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

它还指出：

如果伪元素纯粹是装饰性的，其功能在别处覆盖，则将 alt 设置为空字符串可以避免读取装饰性元素。

这::before与::after伪元素有关；可以在 a 之后指明替代文字/：

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

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

例如，当您使用代码时：

.bullet {
    content: "\2022";
}

\2022(bullet : •) 用 NVDA 宣布“bullet”，而另一个类似\2023(triangular bullet :?) 的代码什么也不宣布