时间戳

首页 > 解决方案 > 用 CSS 替换内容 - 可访问性含义？

html - 用 CSS 替换内容 - 可访问性含义？

问题描述

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

从可访问性的角度来看，我对这是否是可接受的事情感兴趣。屏幕阅读器会看到两个文本还是只看到原始文本？是否应该将 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>

标签： htmlcssaccessibility

解决方案

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

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

无论如何，根据基本的分离原则：内容/结构=HTML，行为/动作=JavaScript，外观=CSS，让CSS生成有意义的文本在语义上是不正确的。它应该在 HTML 中完成。事实上，CSSContent属性不应该用于文本图标和其他纯视觉事物，如果它们被跳过/不显示/不阅读，它们对于一般理解并不重要。

推荐阅读