屏幕阅读器是否可以看到背面可见性? [英] Do screen readers see backface-visibility?

问题描述

我正在研究可访问性，发现 visibility:hidden 不会被屏幕阅读器读取.有谁知道 backface-visibility:hidden 是否会被屏幕阅读器跳过，或者我可以使用它(与 overflow:hidden 结合)来提供仅屏幕阅读器的文本吗?

I'm working on accessibility and found that visibility:hidden will not be read by screen readers. Does anyone know if backface-visibility:hidden will be skipped by screen readers or can I use this (in conjunction with overflow:hidden) to provide screen reader only text?

推荐答案

简短回答

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

Short Answer

It appears to work fine in terms of being able to access the text with a screen reader, but I think the use cases are very limited and you would need to test it extensively before putting into production.

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

I cannot think of a scenario where it is actually useful, however I would love to add another tool to my toolkit so if you think of a scenario this is useful then let me know!

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

I just did a quick test, NVDA and JAWS in Google Chrome both read the contents of a div flipped 180 degrees and then with backface-visibility:hidden. Now that is not a very extensive test so it would need a lot more investigation before you could consider it usable, testing multiple combinations of screen reader and browser to ensure it works consistently.

但是，您为什么要在现有方法上执行此操作?我向大家推荐的 CSS 类 一直可以使用到 IE6，它除了制作之外还有很多功能看不见的东西.

However why would you want to do this over existing methods? The CSS class I recommend to everybody works all the way back to IE6 and there are lots of things that it does other than making things invisible.

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

clip-path: and clip (for older browsers), coupled with a width and height of 1px as a fall-back, are needed in order to ensure the item takes up no physical space on the screen. We also add border: 0 to ensure no border shows and that a border does not add space that the item takes up on the screen, coupled with padding and margin set to 0 for the same reason of taking up space on the screen. Finally we obviously need overflow: hidden to make sure nothing spills out of the element we apply the class on otherwise it is all pretty pointless!

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

There are reasons for the other properties explained in the answer I linked, but hopefully you get the idea that the main concept behind screen reader only text is to ensure it takes up no space on the current screen so it doesn't affect layout while still being accessible to screen readers (added to the accessibility tree).

通过翻转项目并使用backface-visibility: hidden 没有解决任何尺寸问题，它仍然占据页面上的相同空间.

None of the sizing issues are addressed by flipping an item and using backface-visibility: hidden, it still takes up the same space on the page.

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

I would also suggest you would have to look into performance as rotating multiple items like that on the page may result in them having to be rendered by the browser despite being invisible (I have no idea if that is the case but just another thought!). 200 invisible items might have a noticeable impact on performance on slower devices.

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

Finally the biggest problem - most screen reader only text is used with <span> elements to add extra information within a sentence, hyperlink etc. It doesn't appear to work on a <span> within a paragraph in a quick test I did below without adding display: inline-block or display: block, neither or which would be a good idea.

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>

这篇关于屏幕阅读器是否可以看到背面可见性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！