Nicollet.Net

You shouldn’t hide parts of your web pages by using display:none. At least, that’s what Roger Johansson says:

In most cases, using display:none to hide an element is a bad choice that reduces accessibility.

I can’t really agree with that. After all, the display:none CSS property exists for a reason, and that reason is precisely to let designers hide parts of the design that shouldn’t be shown in a particular display mode. For instance, there is no point in displaying a navigation bar in a “print” stylesheet, so the navigation bar will get a display:none property and disappear.

Aside from that, I also use display:none to hide things from users that don’t have JavaScript enabled. I see no reason to display AJAX-specific constructs (such as ‘loading’ sprites or containers used to display the result of asynchronous operations) to these users—instead, non-AJAX constructs should be displayed by default and replaced by their AJAX counterparts though JavaScript executed upon page load.

I believe the core of the disagreement here is what hide means. When I hide something, I want it to be completely gone for the user.

• The user should not be able to see the element.
• The user should not be able to hear the text on the element.
• The user should not be able to select the text of the element by using the browser’s Find method.

It’s already bad enough that some web browsers include hidden text when highlighting and copy-pasting text around it (try copy-pasting the hidden text in this sentence), why go for an inferior solution that doesn’t really hide the element?

In the end, the real question is not how to hide elements—use display:none and that’s it—but rather when to hide elements. And hiding an element that you want some users to see (or hear, or interact with in any other way) is just silly.