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?
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!
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.
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: 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).
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.
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.
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>