屏幕阅读器是否看到背面可见性？答案

【问题标题】：Do screen readers see backface-visibility?屏幕阅读器是否看到背面可见性？
【发布时间】：2021-03-12 16:34:19
【问题描述】：

我正在研究可访问性，发现屏幕阅读器无法读取visibility:hidden。有谁知道屏幕阅读器是否会跳过backface-visibility:hidden，或者我可以使用它（与溢出：隐藏一起）提供屏幕阅读器专用文本吗？

【问题讨论】：

如果您想知道屏幕阅读器是否可以访问某些内容，您应该亲自测试一下。屏幕阅读器和浏览器会不断更新，所以当有人真正经历艰苦的测试工作时，它可能已经过时了。此外，如果您想获得可访问性，了解如何使用屏幕阅读器进行测试至关重要。

标签： css accessibility

【解决方案1】：

简答

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

我想不出它真正有用的场景，但是我很想在我的工具包中添加另一个工具，所以如果你想到一个有用的场景，请告诉我！

更长的答案

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

但是，您为什么要对现有方法执行此操作？ CSS class I recommend to everybody 一直工作到 IE6，除了使事物不可见之外，它还有很多其他功能。

为了确保项目不占用任何物理空间屏幕。我们还添加了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>

【讨论】：