Add visually-hidden attribute / CSS property #206
Description
To make an accessible but visually pleasing website, we often need to add a visually-hidden (or sometimes called sr-only) CSS class.
What it does is allow it to be seen by assistive tech like screen readers by keeping the target element in the accessibility tree, but visually hides it so visual users don’t see it. It can be heard, but not seen.
The usual approach is to add a CSS rule like so:
- https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
- https://css-tricks.com/inclusively-hidden/
However, it’s a bit of a hack.
It would be amazing if this core functionality could be built into browsers, and one that applies the best practice CSS approach.
It would ideally work fantastically with search too — perhaps a visually-hidden element is still searchable. I’m not familiar with how screen reader search usually works (do they use the usual search or a have different way of searching)?