且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2021-11-26 21:47:02

有关将来的参考,请请注意,根据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