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 how it can be used to skip interactive elements from keyboard tabbing. It can even be used on a parent element, nullifying everything inside it. I understood that part, but not entirely why it’s useful since it seems like you might as well use
display: none; if an element is hidden and the elements inside aren’t meant to be in focus. But I’m sure it’s my lack of understanding, so I’m looking forward to Sara’s video to come out so I can re-watch it. It had to do with maintaining a non-awkward tabbing order.
Another thing Sara covered is that some folks who use assistive technology also tend to explore touch screens with haptics, moving about the page with their fingers looking for interactive elements. If you, say, replace a native …