Click Here? No thanks. I have a Better Idea …
So I was reading this post on copyblogger entitled Does Telling Someone to Click Here Actually Matter? and I could feel the old blood a-boiling as the article dismissed all the work that many people in the accessibility circuit have put in so far in trying to get people not to use the damn phrase. Now, I could have vented off in the comments section, but then I decided to do something more constructive.
If you absolutely must use the phrase ‘click here’ because all your evidence or beliefs or hunches suggest it has the greatest effectiveness for click-through, please don’t do it at the expense of accessibility (that is for screen reader users as well as the obvious search SEO/advantages). You can use CSS to achieve your aims and keep the link phrase as something useful for screen reader users and search.
The solution is basically this:
<p><a href="#" class="clickhere"><span>Click here</span> to learn about widgets </a></p>
… using this CSS (or variant thereof):
body {color:#000;}
a{color:#006;font-weight:bold;}
a:hover,a:focus{color:#090;}
a.clickhere, a.clickhere:hover, a.clickhere:focus {text-decoration:none;color:#000;font-weight:normal;/* to match body color and weight */}
a.clickhere span {text-decoration:underline;font-weight:bold;color:#006;}
a.clickhere:hover span, a.clickhere:focus span {color:#090;;text-decoration:underline;font-weight:bold}
code {color:#00FF33;background:#000;padding:2px;}
It will produce a visibly underlined click here but the rest of the text ("to learn about widgets") will match the body text. This will not help fully sighted users who are just scanning through the document picking out links visually, though - they will still see only ‘click here’, ‘click here’. So it’s a compromise, but sometimes that’s what you have to do in battle!
You can view a page with a working example (that does not clash with this site’s own style sheets) here. Or perhaps I should write click here to view a working example.
