Add visually-hidden attribute / CSS property

[royalicing]

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)?

[vmpstr]

I think this is a good idea. I wonder if whatwg or csswg is a better spot to discuss this though. I'm not sure if there are accessibility specific working groups too.

[chrishtr]

Agree that this should be an HTML or CSSWG issue instead.