CP 5 Make links meaningful

Most visual users quickly scan content pages and often their visual focus is primarily on the links (things they can do). Some people (e.g. Screen reader users) similarly scan pages by tabbing through from one link to the next or by listing just the links.

It is important that links have inherent and sensible meaning to support this scanning behaviour. You should not force your audience to read all the surrounding words if you could convey the essential information in the link itself.

  • Avoid 'click here' type terminology:
    • Do not use 'click here', 'more', 'full information', 'pdf', 'file', etc;
    • Each link should clearly indicate its destination or function, out of context of the text surrounding it;
    • Each link should be distinct from others in the page
  • Links should be short, but descriptive:
    • Don't link whole paragraphs
  • Avoid unnecessary words:
    • - 'link to...', 'click to...' etc. is unnecessary it should be obvious that a link is a link.
  • Provide useful information about the link:
    • e.g. the file format, the size of a download, notification of an external site, notification of a pop-up window;
    • This information is useful to provide in the link itself but sometimes, to assist with reading of the links, it may be more sensible to include the information next to the link
  • Separate adjacent links with a non-link printable character:
    • 'link | link2' or '[link] [link 2]' is standard:
      • can style (hide) with CSS;
    • This was a particular requirement for some older adaptive technologies - not as important now but still worth doing.
  • Lists of links should be presented (and coded) as lists:
    • This avoids confusion caused by links wrapping over multiple lines where it may be unclear whether they are single links or multiple separate links;
    • This also has other benefits - the correct coding of lists passes extra useful information to screen reader users - make sure you specify to your developer that you want them coded as real lists.

Tip: Copy out just the links from your page. Can you distinguish between them? Can you predict the result of clicking on each of them? If not, change them.

Poor: passage of text with multiple use of click here - Good: the item name is the link and is meaningful  Poor: to go to the location map, click here - GOOD: Go to the <link> Location map <link> for directions
Good: Links with download size and format indicated. Good: a link with (opens in new window) next to it  Poor: a list of 3 links but one item has wrapped over a line so that it looks like 4 links. Good: use of a bullet list makes it clear that it is 3 links