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

问题描述

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

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隐藏的跨度：

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 和 ::在个伪元素之后； / 之后可能会显示替代文本：

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 （项目符号：•）用NVDA宣布项目符号，而另一个代码，如 \2023 （三角形项目符号：‣）则什么也没有宣布

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

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