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.
Harold wrote:
What is your opinion on phrases such as “use the menu on the left” or “select an item from the menu on the right”? Obviously this won’t make much sense if read aloud by a screenreader. With what could we replace these phrases?
Posted on 19-Sep-07 at 1:51 pm | Permalink
Ian wrote:
I would personally avoid - or at least I would try to (but this is the kind of thing that easily slips through), just as I would try to avoid using presentational CSS classnames such as ‘leftnav’, because if you change the style the navigation may move to the right.
You ask what it could be replaced with - how about ‘Use the main navigation menu’ and ensure that your navigation is preceded by a heading (e.g. h2, h3, whatever) with the matching title ‘Main Navigation’. This can be hidden with CSS, but still be keyboard navigable for screen reader users.
I’m more flexible on the usage of ‘Back to top’ as it’s pretty clear that it means to the beginning of the document/page.
Posted on 19-Sep-07 at 2:21 pm | Permalink
simon r jones wrote:
i was always under the impression adding the title attribute was a reasonable method to add meaning to “click here” / “read more” style links. Would you recommend against this technique?
The upcoming W3C Accessibility Guidelines (2.4.4) seem to reference both using the title and CSS to hide descriptive parts of the link - http://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
Is this an example of another hotly debated part of web accessibility?
Posted on 19-Sep-07 at 3:34 pm | Permalink
Ian wrote:
@simon, the problem is thta use of title to reinforce is still not perfect - a user can configure a screen reader massively and may not have it set to read title attributes. Because there are so many misuses of title attribute (stuffing keywords all over the place for SEO and what have you), many users switch off the facility to announce that attribute. Using the technique I’ve described above, there’s no question that the user will hear the entire link phrase. The downside is that a screen reader user does not ‘click’, as they are not using a mouse, but rather activates by a keypress. That said, someone who uses a screen reader is *well used to this* and certainly wouldn’t get stuck here: “Oh no, it says click here but I can’t use a mouse, whatever am I going to do?!”. You catch my drift!
Posted on 19-Sep-07 at 3:40 pm | Permalink
Carlos wrote:
I suspect that your compromise solution is also at the expense of accessibility, if we understand accessibility and something more than screen reader users, for example taking also into consideration people with cognitive disabilities, for whom these compromise solutions are not solutions at all as they still have to fight with no-sense (or nonsense) linking texts that doesn’t help in the navigation at all.
Posted on 19-Sep-07 at 4:22 pm | Permalink
JackP wrote:
Yes, but (as Joe Clark pointed out to me) if someone is using a cut-up version of your page as provided by a screen reader and not how you intended it (i.e. just a list of links), then isn’t it really their own fault if the links don’t make sense — assuming that they made sense when they were in context?
My personal call (as I mentioned on AccessifyForum) is the halfway method of using the title attribute. If you don’t cut up my page and read it out of context, or you cut up my page and you take notice of my title attributes, you’ll get the necessary information.
But if you cut up my page and don’t read the title information that I made available to you and you didn’t read for whatever reason, then the links may be less meaningful - but that’s entirely your own fault.
Posted on 19-Sep-07 at 4:39 pm | Permalink
Carlos wrote:
@JackP, “click here” is not meaningful at all and doesn’t make sense with or without context. Title is OK as a complement, but just if your links are at least a little bit meaningful on their own, and that’s not the case of “click here”.
Posted on 19-Sep-07 at 4:59 pm | Permalink
JackP wrote:
@Carlos, don’t worry!
I was meaning something more like a phrase like
“I have been investigating the properties of the title element when coupled with a large cup of coffee and have produced a TESTCASE”
…with TESTCASE as the link. It’s meaningful in context, it certainly doesn’t say “click here”, but taken out of context, you won’t know what it’s a testcase FOR…
Posted on 19-Sep-07 at 5:06 pm | Permalink
patrick h. lauke wrote:
“What is your opinion on phrases such as “use the menu on the left” or “select an item from the menu on the right”?”
I absolutely hate those. They’re only needed if a site fails at making it obvious where to go…or often it’s managers who are too worried about “but will users know that they need to use the links on the left?”. Yes, if a site is such an inobvious mess that users need to be directed towards links because they probably can’t find them, then such phrases may well be necessary…but they point to far more fundamental problems of clutter and bad visual hierarchy etc.
Posted on 19-Sep-07 at 6:15 pm | Permalink
patrick h. lauke wrote:
additionally, whenever somebody mentions “should we add a ‘use the links on the left’ to the copy”, i ask if we should maybe also explain to them that to do that, they may need to move that pointer-looking thing on their screen with the mouse, or to tab to those links, etc. at some stage, we need to assume that users know how to use a (well designed, obviously signposted) website.
a counterpoint to my previous statements: there’s no major harm in dropping a (redundant) link into the main copy of a page to point to a specific section of the site. if there are lots of links in the left-hand nav, say, it’s no crime to have something like “For more stories, visit our [link]news archive[/link]”, rather than “For more stories, use the links on the left to go to our news archive.”
Posted on 19-Sep-07 at 6:19 pm | Permalink
John Faulds wrote:
Another alternative which has been written about before is to wrap the extra information that comes after ‘click here’ (in this case ‘to learn about widgets’) in a span and move it offscreen; it’s still read by AT users and SEs but doesn’t show on screen.
Posted on 20-Sep-07 at 2:01 am | Permalink
Carlos wrote:
@john, I’m afraid that this other alternative is even worse, as it suffer from the same problems as the first “compromise solutions” (see #5), and it additionally makes imposible for others than screen reader users to have an idea of what are they going to find if they follow the link.
Posted on 20-Sep-07 at 11:34 am | Permalink
Harold wrote:
Thanks for the responses to my “click in the menu on the left” query. I agree with patrick h. lauke that it’s a sign of bad design, however the reality of the situation is that the layout (or code for that matter) of the site I spend a lot of time in is not under my control, it has zero semantic markup: headers are implemented with spans for example. I will look into the possibilities of adding redundant links instead.
Posted on 20-Sep-07 at 12:37 pm | Permalink
Mike Cherim wrote:
Click here has the greatest click-through rate because users don’t know where the damn link leads and have to click it to find out! Not a good practice in my opinion, though I suppose there are instances where it’s perfectly fine (on a page by itself preceeded by text that makes it clear, but even that is weak becuase not all users will access the descriptive text as we want them to).
Regarding the spatial location of webby parts, I don’t mind using right, left, top, bottom, but one does have to consider that not all users will see it the same way. What I do in those rare instances when I do give a physical location like that is add to the statement, then using offset positioning I strip part of it away so it’s not visible, but will still be accessible. I only define the class in the screen style sheet. All others get the text (I do provide handheld and print style sheets regularly so this is possible).
<p>Use the menu to the right,<span class="offset-screen"> or at the bottom of the page if you're using a browser that offers the page differently,</span> to get around this site.</p>I don’t use something like this very much, but IMO it can be helpful, especially if you really need to convey location to your core audience.
Posted on 21-Sep-07 at 10:28 pm | Permalink
James wrote:
As I understand it, search engines will penalise pages that hide text by setting its colour to be the same as the background.
This is because it was once used to try and trick search engines into bumping that page up the rankings.
It will also still take up physical space on the page. Avoiding this is usually the reason why “More” or “Click here” links are used.
Maybe absolutely positioning the text off the screen would be an alternative?
See also the thread on this topic on the forum: www.accessifyforum.com/viewtopic.php?t=9067
Posted on 24-Sep-07 at 2:05 pm | Permalink
Click Here -- It's Not About SEO! :: Unintentionally Blank wrote:
[…] out what it was about. Or you could just click the link to find out, Mike Cherim alluded to this in a comment on Ian Lloyd’s compromise solution on Accessify. Clicking to find out what a link is all […]
Posted on 24-Sep-07 at 10:43 pm | Permalink
Kai wrote:
Another way - if there is no room for long link phrases - would be:
Click here to view our beautifull product xyz
So you have a visual short version wich expands in screenreaders nicely. Of course it is better to show the complety link to everybody…
Posted on 04-Oct-07 at 7:30 am | Permalink
Kai wrote:
There should have been code in my previous statement…
[a …]Click here [span class=offscreen]to view our beautifull product xyz[/span][/a]
Posted on 04-Oct-07 at 7:32 am | Permalink