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
