简答
在能够使用屏幕阅读器访问文本方面,它似乎工作得很好,但我认为用例非常有限,您需要在投入生产之前对其进行广泛的测试。
我想不出它实际上有用的场景,但是我很想在我的工具包中添加另一个工具,所以如果您想到一个有用的场景,请告诉我!
更长的答案
我刚刚做了一个快速测试,Google Chrome 中的 NVDA 和 JAWS 都读取了翻转 180 度的 div 的内容,然后用backface-visibility:hidden
。现在这不是一个非常广泛的测试,因此在您认为它可用之前需要进行更多的调查,测试屏幕阅读器和浏览器的多种组合以确保其一致工作。
但是,为什么要在现有方法上这样做呢?这我向大家推荐的 CSS 课程 https://stackoverflow.com/a/62109988/2702894它一直可以追溯到 IE6,除了使事物不可见之外,它还可以做很多事情。
clip-path:
and clip
(对于较旧的浏览器),再加上width
and height
of 1px
作为后备措施,需要确保该项目不占用屏幕上的物理空间。我们还添加border: 0
确保没有边框显示,并且边框不会增加该项目在屏幕上占用的空间,再加上padding
and margin
设置为 0 的原因与占用屏幕空间的原因相同。最后我们显然需要overflow: hidden
为了确保没有任何内容从我们应用该类的元素中溢出,否则这一切都是毫无意义的!
我链接的答案中解释了其他属性的原因,但希望您明白仅屏幕阅读器文本背后的主要概念是确保它不占用当前屏幕上的空间,因此不会影响布局同时仍然可供屏幕阅读器访问(添加到辅助功能树中)。
任何尺寸问题都不能通过翻转项目并使用来解决backface-visibility: hidden
,它仍然占用页面上相同的空间。
我还建议您必须考虑性能,因为旋转页面上的多个项目可能会导致它们必须由浏览器呈现,尽管它们是不可见的(我不知道是否是这种情况,但这只是另一个想法!) 。 200 个不可见项目可能会对速度较慢的设备的性能产生显着影响。
最后最大的问题 - 大多数屏幕阅读器仅使用文本<span>
在句子、超链接等中添加额外信息的元素。它似乎不适用于<span>
在我在下面进行的快速测试的一个段落中没有添加display: inline-block
or 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>