Is `height: 0; width: 0; overflow: hidden;` enough to visibly hide a span?
I got a
<span aria-life="assertive"> which should not be visible, but read by screen readers if it changes (sorting of a table). So I checked how frameworks do their sr-only class and I thought height: 0; width: 0; overflow: hidden; should be enough.
1) Am I overlooking some edge cases?
2) Why is it 1x1px small, with margin of -1px, which would make it effectively -1x-1px small?
3) Is the rest because they use it for different elements, that could bring margin, padding, border, etc.?1 Reply
We don't do a
because old browsers used to remove that element from the accessibility tree. My guess is they assumed its 0 by 0 and the content is hidden, so it's the same as
display: none.
Ana Tudor started a convo that seems to dismiss this though ( https://mastodon.social/@anatudor/109861951035141007 ) and one person (if you scroll down far enough) tested it in all modern browsers (and even IE11) with screen readers and it was fine... , so it would be safe with newer browsers... how far back that goes though, I have no idea.Ana Tudor 🐯
mastodon.social
Ana Tudor 🐯 (@[email protected])
Attached: 3 images
@[email protected] I keep seeing this kind of posts & I have questions.
Because I'm not seeing them showing how they've tested "zero dimensions on an element with overflow:hidden [...] would cause it to be removed from the accessibility tree".
I actually tested https://codepen.io/thebabydino/pen/LYrvYPz & the element...