So hidden text on the web is a BAD THING, we all know that. Gone are the days when it was considered cool to stick loads of words on a page — usually at the bottom — in the same colour as the background, possibly in 5px type.
Of course the search engines got wise to this “keyword loading”: it contributed nothing to the content of the page, after all. It got dumped into that category of “Blackhat technique”.
Good content is all about value to the reader and every word should count, so stuffing lots of “invisible” text on a page is simply wasted pixels. If you want to increase the keyword densities of your pages, simply write more (or at least write better).
But hang on. Never say never. There is a very good reason for including “invisible” text on your page, and not just the correct use of alt- and title-tags.
Those with a visual impairment rely on the text on a page completely: pretty pictures make no difference to them, so make the page work for people who can only read text. That means fully explaining text links and adding blocks of text to substitute for images.
This is all achieved using the CSS attribute display: none;
Create a style called .accessible (or .ted or .jarvis or whatever, it’s not important) thus …
.accessible {display: none;}
Now, any time you want to add “hidden” text, you can do it simply by wrapping it inside this class.
That means that the phrase …
The <span class=”accessible”>cat sat on the </span>mat
renders to an ordinary browser as …
The mat
but to a screen reader as …
“The cat sat on the mat”
Of course it’s a frivolous example but you might use this technique to improve a list-based navigation.
On SmartLiveCasino.com we currently have a left nav where the code is a horrible table-based affair (I promise it will change) …
<table width="180" border="0" cellpadding="0" cellspacing="0"
class="bgrleftmenu">
<tr>
<td width="20">
<img src="../images/default/spacer.gif" width="20"
height="36"></td>
<td colspan="2" class="headerleft">Menu</td>
</tr>
<tr>
<td colspan="3">
<img src="../images/default/spacer.gif" width="20"
height="8"></td>
</tr>
<tr>
<td> </td>
<td width="13">
<img src="../images/default/spacer.gif" width="4"
height="7"></td>
<td width="147">
<a id="ctl00_LeftUserMenu1_LeftMenu1_hlinkHome"
class="linkyellow12"
href="default.aspx">Home</a></td>
</tr>
<tr>
<td> </td>
...
<td>
<img src="../images/default/spacer.gif" width="4"
height="7"></td>
<td>
<a class="linkyellow12"
href="../en/help.aspx">Home</a></td>
</tr>
<tr>
<td colspan="3">
<img src="../images/default/spacer.gif" width="1"
height="12"></td>
</tr>
</table>
However, the Semantic alternative is not only much more elegant, it works better in terms of accessibility AND in terms of SEO!
<h2><span class="accessible">Site </span>Menu</h2>
<ul>
<a href="./." title="Go to the Home Page">
<li>
<span class="accessible">Go to the </span>Home<span
class="accessible">Page</span>
</li>
</a>
...
<a href="../en/help.aspx" title="Need Help? Get it here!">
<li>
<span class="accessible">Need </span>Help<span
class="accessible">? Get it here!</span>
</li></a>
</ul>
In a common or garden web browser both of these would produce a standard vertical navigation …
:: Home
…
:: Help
But via a screen reader you get ..
:: Go to the Home Page
…
:: Need Help? Get it here!
“But what’s the point of all this?” I hear you cry. “Are you just being nice to blind people?”
Well, yes — and remember that a MAJORITY of the world’s population has some sight impairment — but there’s one “blind” individual that’s important to everyone interested in content and SEO: your local search engine.
Search engines, whatever flavour (but we’re all thinking Google, aren’t we) are effectively “blind”. That text-light, image-heavy page may look good to humans with perfect eyesight and a true sense of colour dynamics, but to Google it’s just a load of source code.
Make your site more accessible to those with a visual impairment and you also make it more accessible to the search engine spiders, but use a technique like this and you actually get more keywords on your page with no penalties!
Save to del.icio.us
Stumble it!
Digg This Story
Report an error