Scott O'Hara recently published "Inclusively Hidden," a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions:
- Hidden for everyone?
visibility: hidden;or the
hiddenattribute. (But watch out for that
hiddenattribute, says Monica Dinculescu.)
- Hidden visually, but present for assistive tech? A
.screen-reader-onlyclass with a smattering of properties to do the job correctly.
- Hidden for assistive tech, but not visually? The
It's worth grokking all this because it's is a perfect example of why HTML and CSS is not some easy bolt-on skill for front-end web development. This is critical stuff that isn't done as correctly as it should be.
If you like video, I did one called "Hiding Things with CSS" that goes over a lot of this.
As I write this, I'm freshly back from Smashing Conf in San Francisco. Sara Soueidan had a wonderful talk that covered some "hiding things" situations that are even less intuitive than what we might be accustomed to seeing.
One thing she covered was the
inert attribute and