DEV 3.3 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 meanings 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:
    • So 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 (see dev 3.1).
  • 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.
  • Use the link title attribute liberally:
    • use this to provide additional useful information about the link.
    • The information in the title attribute appears as a 'tooltip' in some browsers and can be read out by screen readers.
  • 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 implementing.
  • Lists of links should be 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 (see DEV 5.3).

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.

Video clip

Watch how the use of 'click here' type link text can cause difficulty for a screen reader user.