DES 2.3 Make links meaningful
Recommendations
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:
- 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 (see DES 2.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.
- Add extra 'hidden' enhancements to the information and pass this information for coding by the developer:
- The developer will put this information in the link 'title' attribute - make sure you include details of the text you want in the designs you pass to the developers;
- 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.
- 'link | link2' or '[link] [link 2]' is standard:
- 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.
Video Clip
Watch how the use of 'click here' type link text can cause difficulty for a screen reader user.
Alternative Formats
If you experience any problems viewing the video above or wish to download a copy to your desktop select one of the alternative formats below.
Examples
