📝 New post! "The Web Needs a Native .visually-hidden"
The .visually-hidden/.sr-only copypasta is incredibly useful for #a11y… but I don't think it should be a copypasta any more. The web would benefit a lot from it being a web standard.
benmyers.dev/blog/native-visua…
The Web Needs a Native .visually-hidden
For years, developers have passed around a set of styles like a magic incantation. It's time we made it a web standard.Ben Myers
Curtis Wilcox
in reply to Ben Myers 🦖 • • •Something like `display: visually-hidden;` would be a great addition.
Like the `.visually-hidden` copypasta its meant to replace, the element contents would take up no space. How should situations be handled when the element should not be visible but *should* take up space, to allow for its discovery using explore-by-touch with a screen reader?
Should there be `display: visually-hidden;` and `visibility: visually-hidden;` to be the accessibility tree available equivalents of `display: none;` and `visibility: hidden;`? Or should the element taking up space come from using `display: visually-hidden;` and another, existing property: value? Or even a `display` multi-keyword syntax (which would require Chrome et al to start supporting)?
Ben Myers 🦖
in reply to Curtis Wilcox • • •This is interesting!!
I believe in the case where you wanted to emulate viability: hidden, opacity: 0 now suffices? I seem to recall those heuristics changing recently. I could be wrong though! And definitely that’s a space where something more explicit would be great.
Curtis Wilcox
in reply to Ben Myers 🦖 • • •Yes, `opacity: 0` is what @SaraSoueidan used in a post you linked to, "Inclusively Hiding & Styling Checkboxes and Radio Buttons."
But as you allude to, I think there have been browser heuristics that would look at such styling and decide, "oh you silly developer, you used `opacity: 0` but aren't animating it, you must have meant `visibility: hidden`" and not included the content in the accessibility tree. `opacity: 0.01` was a workaround but annoying and probably has a browser paint performance impact. A style like `visibility: visually-hidden` would make the intent explicit.
sarasoueidan.com/blog/inclusiv…
Inclusively Hiding & Styling Checkboxes and Radio Buttons
www.sarasoueidan.comJamie Teh
in reply to Ben Myers 🦖 • • •Skip links are tricky, since there's no good solution for those right now. But again, I'd argue skip links themselves are legacy and should really be replaced by browser support for keyboard navigating landmarks (not just screen readers).
Jamie Teh
in reply to Jamie Teh • • •Jamie Teh
in reply to Jamie Teh • • •<a href="..."><span aria-hidden="true">Some text</span><span class="visually-hidden">The same text but with slightly different formatting or something</span></a>
That seems fine on the surface. However, if you have a screen reader user (low vision perhaps) who happens to use the mouse to read text, the aria-hidden text won't get read for obvious reasons, but the visually hidden text is off screen, so it won't get read either.
Sure, we can say "that's just a bad pattern". But really, it demonstrates the unintended consequences of this kind of hack.
Ben Myers 🦖
in reply to Jamie Teh • • •Thank you for the reply, Jamie!
Yeah, there’s a weird balance here, for sure, and I can definitely agree that most of the time, visually hiding content is an antipattern. But even if the number of real-world cases where visually-hiding content is the best course of action is low… I still feel like a spec’d out, browser-implemented approach would be important for robustness’s sake.
Jamie Teh
in reply to Ben Myers 🦖 • • •