css - 如果 CSS 属性 "opacity"恰好为 0，是否只会对屏幕阅读器隐藏内容？

Question

我需要知道我是否可以使用 opacity: 0.01 来在视觉上隐藏我的内容。我需要淡入滚动内容，但如果我添加 opacity: 0 我不确定这对屏幕阅读器和 SEO 有何影响。动画在 0.01 作为值时工作正常。

你们中有人知道这个问题的答案吗？谢谢

Answer 1

一般来说，CSS 不会影响屏幕阅读器。唯一的异常(exception)是:

• 显示:无
• 可见性:隐藏
• :before 和 :after 伪元素
• (编辑)高度:0 或宽度:0(一些屏幕阅读器/浏览器组合会忽略尺寸为 0 的元素，但不是全部)

前两个将对屏幕阅读器隐藏元素。最后一个可能会向“可访问名称”添加文本。请参阅“Accessible Name and Description Computation 1.1”中的步骤 2.F.ii。

屏幕阅读器会忽略不透明度。它只是改变了元素的外观，并没有将它从 DOM 中移除。您可以将其设置为 0，屏幕阅读器仍会阅读该元素。

Most Screen Readers will skip content with opacity: 0

我不确定你从哪里得到的。我从未见过屏幕阅读器跳过 opacity:0 的元素。