如何在没有 HTML 标记的情况下从屏幕阅读器中隐藏 CSS 生成的内容? [英] How to hide CSS generated content from screen readers without HTML markup?

问题描述

如何从屏幕阅读器中隐藏 CSS 某些生成的内容(用于纯样式)?是否可以不使用像 aria-hidden 这样的 HTML hacks?

How would one hide CSS certain generated content (used for pure styling) from screen reader? Is it possible without using HTML hacks like aria-hidden?

例如我使用代码 content: '·'; 来分隔东西.我检查了 facebook &其他大玩家，但他们似乎都使用带有 aria-hidden 的跨度:

E.g. I use code content: '·'; for separating stuff. I've checked facebook & other big players but they all seem to use spans with aria-hidden:

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

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

Does it mean it’s not possible currently?

推荐答案

供以后参考，注意，根据 CSS 3 文档:

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

Generated content should be searchable, selectable, and available to assistive technologies. The content property applies to speech and generated content must be rendered for speech output.

还有人说:

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

If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element.

这涉及到 ::before 和 ::after 伪元素；/ 后可能会指示替代文本:

This concernes ::before and ::after pseudo-elements; alternative text might be indicated after a /:

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

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

For CSS2, you may use unpronounceable UTF-8 elements in order to be sure that the elements won't be announced.

例如，当您使用代码时:

For instance, when you use the code:

.bullet {
    content: "2022";
}

2022 (bullet : •) 用 NVDA 宣布bullet"，而另一个代码如 2023(三角项目符号 : ‣)什么都不宣布

2022 (bullet : •) announces "bullet" with NVDA while another code like 2023 (triangular bullet : ‣) announces nothing

这篇关于如何在没有 HTML 标记的情况下从屏幕阅读器中隐藏 CSS 生成的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！