css - 屏幕阅读器能看到背面可见性吗？

Question

我正在研究辅助功能，发现屏幕阅读器无法读取 visibility:hidden。有谁知道屏幕阅读器是否会跳过 backface-visibility:hidden ，或者我可以使用它(与溢出:隐藏一起)来提供仅屏幕阅读器的文本吗？

Answer 1

简短回答

在能够使用屏幕阅读器访问文本方面，它似乎工作得很好，但我认为用例非常有限，您需要在投入生产之前对其进行广泛的测试。

我想不出它实际上有用的场景，但是我很想在我的工具包中添加另一个工具，所以如果您想到一个有用的场景，请告诉我!

更长的答案

我刚刚做了一个快速测试，Google Chrome 中的 NVDA 和 JAWS 都读取了翻转 180 度的 div 的内容，然后使用 backface-visibility:hidden 。现在这不是一个非常广泛的测试，因此在您认为它可用之前需要进行更多的调查，测试屏幕阅读器和浏览器的多种组合以确保其一致工作。

但是您为什么要在现有方法上执行此操作？ CSS class I recommend to everybody它一直可以追溯到 IE6，除了使事物不可见之外，它还可以做很多事情。

clip-path:和clip (对于较旧的浏览器)，加上 width和height的1px作为后备措施，需要确保该元素不占用屏幕上的物理空间。我们还添加border: 0确保没有边框显示，并且边框不会增加该元素在屏幕上占用的空间，再加上 padding和margin设置为 0 的原因与占用屏幕空间的原因相同。最后我们显然需要 overflow: hidden为了确保没有任何内容从我们应用该类的元素中溢出，否则这一切都是毫无意义的!

我链接的答案中解释了其他属性的原因，但希望您明白仅屏幕阅读器文本背后的主要概念是确保它不占用当前屏幕上的空间，因此它不会不影响布局，同时仍可供屏幕阅读器访问(添加到辅助功能树中)。

翻转元素并使用 backface-visibility: hidden 无法解决任何尺寸问题。 ，它仍然占用页面上相同的空间。

我还建议您必须考虑性能，因为旋转页面上的多个元素可能会导致它们必须由浏览器呈现，尽管它们是不可见的(我不知道是否是这种情况，但只是另一个想法!)。 200 个不可见元素可能会对较慢设备上的性能产生显着影响。

最后是最大的问题 - 大多数屏幕阅读器仅使用文本 <span>元素在句子、超链接等中添加额外信息。它似乎不适用于 <span>在我在下面进行的快速测试的一个段落中，没有添加 display: inline-block或display: block ，两者都不是，或者哪一个都是好主意。

body {
  padding: 50px;
  font-size: 50px;  
}

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.hide-rear {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

<div class="flip">I am visible but reversed</div>
<hr/>
<!-- hidden -->
<div class="flip hide-rear">I am hidden but still take up space on the screen</div>
<hr/>
<p>How does it behave if I use An inline span? <span class="flip hide-rear">If you can see this then it doesn't work!</span></p>