W3C home > Mailing lists > Public > www-style@w3.org > April 2017

CSS property for visually hiding an element

From: Oliver Joseph Ash <oliverjash@gmail.com>
Date: Mon, 03 Apr 2017 14:21:05 +0000
Message-ID: <CADBHO9GPe47p1ZKdBon8CSwAErYCUzh3ysdGi40Sk8cZ7ZLquQ@mail.gmail.com>
To: www-style@w3.org
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.
Received on Monday, 3 April 2017 14:21:47 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:07 UTC