html - 用 CSS 替换内容 - 可访问性影响？

Question

我想用纯 CSS 替换一些第三方生成的内容。其他问题涵盖了各种技术，但基本思想是隐藏现有内容并使用伪选择器添加新内容。

我想知道从可访问性的 Angular 来看，这是否是可以接受的事情。屏幕阅读器会看到两个文本位还是只看到原始文本？ CSS 是否应该包含在@media screen {} 中以避免两者都被使用？

在我的情况下，我只能使用 CSS。我无法编辑 HTML 或使用任何 JavaScript。有什么方法可以只向屏幕阅读器显示替换文本吗？

.third-party-content {
  font-size:0;
}

.third-party-content:before {
  content:"lovely replacement";
  font-size:initial;
}

<div class="third-party-content">unwanted garbage</div>

Answer 1

根本不要使用 CSS 生成的文本来传达有意义的信息。

屏幕阅读器的行为不同。他们中有些人总是阅读它，有些人从不阅读，有些人有时读或不读取决于其他属性。例如，NVDA 大部分时间都在读取 CSS 生成的文本； Jaws 很少这样做(如果有的话，有时也会)。

无论如何，根据基本分离原则:content/structure=HTML，behavior/action=JavaScript，appearance=CSS，让CSS生成有意义的文本在语义上是不正确的。它应该在 HTML 中完成。事实上，CSS Content 属性不应该用于文本图标和其他纯粹的视觉事物之外的其他东西，如果它们被跳过/不显示/不阅读，这些东西对于一般理解来说并不重要。