CSS property for visually hiding an element

It is quite common for web developers to require an element to be hidden
but only visually—that is, still accessible to screen readers and keyboard
users, but not visible on the screen.

If you search for "visually hidden element CSS", you will find lots of
hacks to solve this problem. Most famously, perhaps, is the
"visuallyhidden" class that comes with the HTML5 boilerplate project:
https://github.com/h5bp/html5-boilerplate/blob/9d6176a26ca4b70ab64a51d7abb9d3ebaa197855/dist/css/main.css#L135

Could we add something to CSS to support this requirement, so authors don't
have to resort to these crazy hacks?

I fear many authors currently resort to using `display: none` instead,
which hides an element both visually and semantically. This is not good for
accessibility.