Hiding content from users? From Google?

These days we often hide content or even context from our users because we make up for it in other ways (usually more aesthetically pleasing ways) by having place holder text in our text boxes or using an image for text (when there's absolutely no other alternative).

Maybe an <h1> doesn’t fit any where on your home page but guidelines and common sense tell you that it’s required.

You decide to hide the content using display:none or position:absolute; left:-9999px
Depending which method you choose, do you really know who you’ve just hidden that from?

They both yield the same result… right? They both hide the elements they’re applied to and they both remove the elements from the flow of the document. So why not use display:none to save a few characters?

To the “average” user, both yield the same result. One solution hides the elements from view entirely, the other moves it off the screen far from view of 99.9% of displays (unless you’re stretching your browser window over 7 or 8 monitors at once!).

So based on this, why shouldn’t you just go for display:none?

Well! Let me tell you why NOT…

Using the shorter display:none; will hide all of the elements and all of the content stashed within from everything, not just the “average” user.

This includes the following but not limited to:

• Partially sighted or blind users who rely solely on the use of Assistive Technologies (AT) such as screen readers like JAWS or NVDA
• Elderly users whose sight has deteriorated due to old age
• Google, Yahoo, Bing and many other search engines who choose to ignore content hidden in this way for any number of reasons

I say “average” in air quotes because these days there are no average users. A large number of users require the aid of AT such as screen readers but are certainly not limited to screen readers alone, and of course the other big user of your content – search engines! The last thing you want to do is hide important information and content from them.

Hiding your content

First you should ask yourself why you are hiding this piece of text or block of content in the first place. Are you hiding it because you don’t need or want it on the page at all or in this context? If so, then you shouldn’t be outputting the content at all, you should remove it at the code level so nobody can see it.

Hiding content that isn’t needed is considered risky at best, doing so can get you penalised by search engines. The last thing you want is your company website to be penalised because google has flagged your site for keyword stuffing and knocked you down the search results or at worst removed you entirely.

Ok so what should I do if I need to hide content

First off there is a fine line between needing to hide content and wanting to. Many people would argue for either case, perhaps because their design requires it still to be accessible and attractive at the same time. This is the stance I’m going to take. Although I agree it’s not always the most accessible way to do it (according to the WCAG Guidelines) it’s the way 99% of people are going to do it.

One of the most common mistakes of using display:none to hide content, is when laying out a pretty form. We (and by we I mean designers) will put place holder text inside a text box to remove the requirement of having a <label> element adorning every field.

This is fine, and it’s something we’ve employed on the Heart & Sole blog (search box and comment form, although people can forget what fields are for if there aren’t any clues!). However, we haven’t used display:none to hide the labels from our perfectly sighted users as this would have a drastic effect on our screen reader users who aren’t seeing the lovely place holders inside each text box and who solely rely on that little piece of text before each form field in a <label>.

Instead, we used position:absolute. This takes the element out of the flow of the document (thus not affecting the layout of the page) and positioned them left:-9999px out of view;

You might ask why 9999px precisely? That seems a little specific. To be honest, I don’t know why it’s 9999, why not 10000… that’s a nice round number! It really doesn’t matter as long as you remember that we’re not browsing sites in a 1024px wide window any more.

My iMac (when maximised) displays a browser window at 2560px wide (give or take a few for scroll bars etc). So please please please (I emphasise the point!) don’t use left:-999px or left:-3000px. Both of which I’ve seen and both I’ve seen fail miserably. You just see a chunk of content floating to the left of the site which at best could just put people off but could potentially confuse your users.

Wrapping up…

So hopefully after that massive post (rant) you’ll now have a better understanding of when you should use display:none; or position:absolute; left:-somearbitrarynumberpx;

You’re not just hiding a piece of content that isn’t required for users with perfect vision. You’re potentially hiding valueable content or context from users who need that to navigate or perhaps purchase things from your site.

Every time you hide content, think to yourself. Should this be hidden from everybody and everything, including search engines. Or, should I hide this using accessible methods (position absolute… yada) to enable AT users and search engines to pick up this content.

If you’re still just as confused or completely disagree with me then leave a comment or hurl your words at me via twitter @Lletnek! There are many other issues I could have gone into, but if I made it any longer then nobody would read it! ;)