Move text off the screen, not display:none

Why bother?

Visual designs often require hiding text in such a way that screen readers will still read the text and thus provide extra context for the screen reader user.

For example, a visual design may make the main navigation section of the page obvious and so a heading to announce it may be unnecessary or undesirable.

However, from the perspective of good document structure/semantics and accessibility, it would be good to have the heading in there.

Screen reader users, for example, often scan a page through having a list of headings being read out to them.

The problem of display:none in CSS?

display:none in CSS would seem ideal (plus some additional rules in an aural stylesheet, perhaps).

Unfortunately, screen readers are inconsistent in the way they handle display:none.

In addition, most do not yet support the aural stylesheet sufficiently.

Positioning text off the screen is more reliable

For years, I have been using an “off-top” technique whereby content can be moved off the top of the screen, in such a way that it will still be read out by screen readers. Here is an example:

.css-label {
    height:1px;
    left:0px;
    overflow:hidden;
    position:absolute;
    top:-500em;
    width:1px;
}

A simple example of using the above may be to provide a header to a section such as the navigation:

<h2 class="css-label">Navigation</h2>

Some use use an “off-left” approach instead, though it seems to cause the odd problems with earlier versions of Opera and Safari (any one using those anymore?)

That being said, a comment left on Gez Lemon’s post about display:none issues answers my question of whether off-top is better or not than off-left saying there may be some issues with off-top. I’ll need to look into that further, but either of those are certainly better than using display:none.

More information

For further reading, see the following:

• Hiding Content from View, AbilityNet, November 2007
• Screen Readers and display: none, Gez Lemon, Juicy Studio, 12 October, 2007

Will search engines see this as keyword stuffing?

A comment left on Gez Lemon’s post asked what would be the impact on search engine listing?

Comments are closed on that post, so I will try to answer it here, as it is something I have been wondering for a long time.

The concern from an SEO point of view is that search engines may think you are tricking them even though this is a legitimate techniques for a legitimate purpose. However, some people could use these techniques for keyword stuffing, thus putting this useful technique in jeopardy and making it harder to provide sufficient context to assistive technologies.

Search engines would likely have a hard time detecting this in an automated manner

But for search engines to detect this they would at least need to parse all the CSS. Then, they would have to looking for all the different permutation of these rules and be 100% sure this is being done for keyword stuffing and not for some other legitimate reason.

Sounds tricky (and easy to circumvent — e.g. by using JavaScript to set these styles, as it is only being hidden from visual user agents).

Or, search engines would need to implement an entire DOM and calculate where on a screen all the text would go. Some major web browsers struggle to do this properly, so search engines aren’t likely to do it too well either, I would think.

But they may use manual checks for better results; that would be good for legitimate use of this technique

However, while automation and throwing lots of servers at a problem may seem problematic (for now!), these things require human, subjective, interpretation. So why not have people check sites manually?

Google, for example, does have a little army of people to manually verify sites are not using unfair tricks. So I guess if they are concerned about this particular technique, they might be able to get software to go a certain distance and then flag up suspicious cases to be manually checked. Legitimate sites should then be okay.

More information

But don’t take this as advice! Search engines often change the way they work! So check out this article from SEOMoz, a prominent SEO web site: A Comprehensive Guide to Hidden Text & Search Engines (10 July, 2007).