If they don't, then they should. It's far to easy to create links labeled "click here" or "read more" but these are next to useless when not supported by the context of their surrounding text. Imagine how you'd decide which of these links to visit if they were displayed listed as a simple list of links. An unrealistic situation you might say, but you'd be wrong - this is exactly the situation faced by blind and partially sighted users every day. Popular screen reader software like JAWS and Window Eyes provide mechanisms for browsing through all links found in a page, the aim being to allow users to more quickly find the information they're after. Similar mechanisms exist for headings and other page elements but these are next to useless if you haven't labeled things correctly. Some argue that one can expand the meaning of a link through it's title attribute but this unfortunately proves to be a bit hit and miss - many screen readers don't read text in title attributes by default.
To add more salt to the wound let's turn to search engine crawlers. These place high importance on the text you assign to links so you're missing a trick if you continue to mislabel links in this way. Ever wanted to know the biggest culprits of the "click here" link? Simply search for this text in Google.
A Script To Highlight The Problem
In my own posts I try reasonably hard to ensure links make sense out of context but sometimes I slip up. I can think of several instances of really poorly labelled links in previous posts and I really need to go back and correct them. In an attempt to highlight these failings going forward and because it seems like a useful additional navigation aid I've developed a simple script which extracts all links from a post and adds them to a new section in the side bar on the fly.
Note: It's not on my site yet as I need to do a little CSS restructuring to accomodate it first.
var oExtractedLinks = {iHeadingLevel : 3,sHeadingText : 'Links in Post',sParentId : 'post',Init : function() {// check for DOM support and valid parent idif (!document.getElementById || !document.getElementById(this.sParentId)) {return false;}this.Process();},Process : function() {// get links contained in parentaLinks = document.getElementById( this.sParentId ).getElementsByTagName('a');// get number of linksiNumLinks = aLinks.length;// does the parent actually contain any linksif (iNumLinks) {// get script node, we'll insert everything relative of this to remove need for extra markupvar oParent = document.getElementById('extracted-links');// create heading and listvar oHeading = document.createElement('h' + this.iHeadingLevel);var oList = document.createElement('ul');// add specified text to headingoHeading.appendChild( document.createTextNode(this.sHeadingText) );// insert into documentoParent.parentNode.insertBefore(oHeading, oParent);for (var i = 0; i < iNumLinks; i++) {// add link to listthis.AddLink(oList, aLinks[i]);}// insert list into documentoParent.parentNode.insertBefore(oList, oParent);}},AddLink : function(oList, oLink) {// make sure the first node of the link isn't an imageif (oLink.firstChild.nodeName.toLowerCase() != 'img') {// create list item and anchorvar oListItem = document.createElement('li');var oItemLink = document.createElement('a');// get attributes from source linkoItemLink.setAttribute('href', oLink.getAttribute('href'));oItemLink.setAttribute('title', oLink.getAttribute('title'));oItemLink.appendChild( document.createTextNode(oLink.firstChild.nodeValue) );// append anchor to list itemoListItem.appendChild(oItemLink);// append list item to listoList.appendChild(oListItem);}}}// run the script, we're not using onload or DOM ready so the script won't pick up links appearing after the script referenceoExtractedLinks.Init();
View a live demo of the script
Having downloaded the script, to use in your own site simply add the following line into your page at the point at which you'd like the links to appear. Also make sure you update sParentId with the ID of the element containing the links you'd like to extract.
Screen Readers
If you're new to the way screen readers work I'd highly recommend heading over to the YUI Blog and watching Yahoo!'s Accesibility Project Manager demonstrate how they're used.
A demo version of JAWS is available which can be used for up to 1/2 hour at a time. After this you'll have to reboot your computer before continuing to use it.
Further Reading
- A long time ago the W3C wrote about avoiding the infamous "click here" links. It's still a useful reference and contains other interesting sub-links.
- Don't 'click here': writing meaningful link text
- 'Click here': Needless words
An interesting piece. I'm not quite sure I see the value of separately listing an article's link text, but I would love a tool that could do this for an entire site at once, broken out by page. That would be cool. (The Firefox plugin
My previous comment got cut off. Trying again:
An interesting piece. I'm not quite sure I see the value of separately listing an article's link text, but I would love a tool that could do this for an entire site at once, broken out by page. That would be cool. (The Firefox plugin Fangs can do this on a per-page basis.)
Unrelated: As I'm sure you know, descriptive link text helps everyone, not just screen reader users, because it aids scannability. Just another reason to do it right.
Michael - re descriptive links helping everyone - I totally agree. Most guidance given for improving accessibility also improves overall site usability.
One of the things I've been looking at with Victor Tsaran is having extra sections to 'more' links which get hidden.
For example If you have a news piece on The Crown Jewels you might have a visual link "More" which is visually situated in context with the story. However it would read "More on the Crown Jewels". This can easily be done by hiding adding the additional text in a span and hiding screen it off screen using CSS.
This is something I keep meaning to address on my own site but have yet to get round to.
But to help me quickly see all links minus their surrounding text I put together a quick bookmarklet to extract all links from a page.
You can get the bookmarklet from my post about it: View links without context
Tom - a nice idea. For the benefit of other readers I've put together a quick example of replacing text in this way.
Aaron - nice bookmarklet, thanks for sharing. I've added a quick link to your article. I've also updated my code to include checking for images in links (I should have done that to begin with ;-))
It get's even better, these links are better for SEO too ;)
I wrote a related piece a while ago called Improper Link Text.
I like your approach and I will continue to check out your blog in the future.
Sorry, didn't notice the BBCode requirement below.
The link above should have been Improper Link Text
I think naming the link something relevant to what is on the click thru page is the best way to link to content.
Anyone know of a PHP version? It would be very useful to set a bot that can scan an entire site, log all of the link texts along with their respective urls so that a mass revision of a site can take place.
Naming your links in such a fashion "Click Here" or "Read More" is atrocious for click through rate as well. You really need to lead your reader into the next step.
Did you know those screen readers pick up information in DIV with the display:none class? There was big talk of that a few months back as well.
I don't know how many times of heard of the Google link bomb "Click Here" ranking Adobe Acrobat for that phrase, but it has to be a million or more.
Blue underlined links (yes, they should always be blue if you want your reader to click them), need to be descriptive and engaging for all users. That's just a best practice when it comes to web design and copy writing in general.
I've found naming your link to whats relevant on your page not only helps your click through ratios but also helps your seo rankings for that term.
I got a minute to watch the yahoo video with victor Tsaran and actually realized some key concepts that I have been overlooking with the development of my sites. I really never took the time to watch a screen reader work and now realize I have a little bit to go back on and update.
It wasn't clear to me but it does appear that title tags in links do help seo. However, in this video he pulls up a link list on his screen reader that has ordered the links by a rank/rating. Do the screen readers rank links better if they have titles? I could have been mistaken but it appeared that the screen reader was ordering them by some measure.
"click here" is obsolete since it just wastes a net surfers time to figure out why they'd have to click. It is true that a link must command and intrigue a person enough to go ahead and click it, but the phrase has been used for so long as tactic to disrupt your search. A specified link which really should be in the context of what is written saves a surfer time and makes them happy enough to go back to the same page and click on the links that strike their curiosity. Regarding SEO, links that are in context and that are working matter along with valuable content. These go hand in hand to keep a person in your page since its interesting and very surfer friendly.