Question

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

从可访问性的角度来看，我对这是否可以接受很感兴趣。屏幕阅读器会看到文字的全部还是全部？是否应该将CSS包裹在@media屏幕{}中，以避免两者同时使用？

在我的情况下，我只能使用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生成的文本。颌骨很少做（有时会做）。

无论如何，根据基本的分离原则：content / structure = HTML，行为/动作= JavaScript，appearance = CSS，让CSS生成有意义的文本在语义上是不正确的。应该以HTML格式完成。实际上，CSS Content属性不应用于文本图标和其他纯粹的视觉对象，如果被跳过/未显示/未阅读，这些东西对于一般的理解实际上并不重要。

Answer 2

将font-size更改为0只会更改文本的视觉外观，但不会将其隐藏在屏幕阅读器中。屏幕阅读器不在乎字体的大小。只是文本会被读取。

当屏幕阅读器阅读文本时，它称为“可访问名称”。可访问名称是根据以下规则计算的-https://www.w3.org/TR/accname-1.1/#step2。特别是，请参阅步骤2.F.ii

“ ii。检查与当前节点关联的CSS生成的文本内容，并将其包含在累积的文本中。CSS :before和:after伪元素可以为具有内容的元素提供文本内容模型。”

从屏幕阅读器隐藏文本的一种方法是使用aria-hidden属性，但这需要更改HTML，而您声明无法这样做。文本也可以使用标准display:none隐藏，但这显然也会隐藏您的:before文本。

使用CSS技巧在视觉上隐藏文本，例如clip，position，width等，同样只是视觉上隐藏文本，而不是将其隐藏在屏幕阅读器中。 / p>

我不是CSS专家，但是在您尝试的font-size解决方案的基础上，我添加了visibility:hidden，它似乎可以正常工作。我知道hidden只会使文本不可见，但仍会占用屏幕空间，但是当与您的font-size:0（和inherit）结合使用时，它可以防止“不必要的垃圾”占用任何空间空间，因此如果您的元素与原始元素相邻，则两者之间不会有太大的差距。

visibility:hidden 确实对屏幕阅读器隐藏元素。

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

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

您无法在类似的解决方案中使用display:none，因为一旦隐藏了父对象，:before也将被隐藏。

更新：此解决方案可与Firefox上的NVDA（屏幕阅读器）和iOS上的VoiceOver一起使用。（带有屏幕阅读器的Chrome通常未经测试，因为Chrome对屏幕阅读器有零星的支持。）它不能与Internet Explorer上的JAWS一起使用，但IE似乎有两个问题。首先是您的font-size:initial在:before上不起作用。我必须将其设置为font-size:16px。其次是IE无法正确计算要阅读的文本，如上面的步骤2.F.ii所述。 IE无法使用content属性，因此仍会读取“不需要的垃圾”（而不会读取“可爱的替换”）。由于步骤2.F.ii是W3规范，所以我要说IE有一个错误。

如果IE正确读取了content，那么可能仍然存在问题。由于font-size:inherit在IE中不起作用，因此visibility:inherit 可能也不起作用。（我尝试了一个简单的案例，但是没有用。在visibility:visible上设置:before在IE上也不起作用。）

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

2 个答案: