Make sure links stand out clearly from all other content
- Blue underlined text is the most common way to show links. If you use another style:
- Use the link style consistently
- Test with people: Test that people that have not seen the design before can instantly spot all the links
- Limit the number of link styles you use (ideally use only one)
Make links that have been visited look different from those that have not been visited
- By default, most browsers show a visited link as red/purple underlined text, but you can set to another colour as long as the meaning is clear
Use links that are descriptive and meaningful when read out by themselves without any surrounding text
- The text of each link should clearly indicate its destination or function
- Do not use just 'click here', 'more', 'full information', ‘PDF', 'file' and so on
- Make each link text distinct from others in the page
Make links concise but descriptive
-
Do not link whole paragraphs, but do use the most important trigger words for the link
Avoid unnecessary words:
-
Adding words, such as 'link to...' and 'click to...', is usually unnecessary
Provide useful information about the link:
- Adding words, such as 'link to...' and 'click to...', is usually unnecessary
- Sometimes, to assist with reading of the links, it may be more sensible to include useful information next to the link rather than within the link itself
CODE: Use the link ‘title’ attribute to add extra information to links to help communicate the destination more clearly
- Add text that aids clarification, for example, describe the destination site of a link (the site name, type of site), describe the scope of the page or section contents
- Avoid just repeating the link (this is not useful extra information)
- The information in the title attribute appears as a 'tooltip‘ (a description that appears when the mouse hovers over the link) in some browsers, and can be read out by screen readers used by blind people
Place in-page links where they are needed for action :
- Do not force people to hunt for a link elsewhere if it makes sense to place it right where it is needed in-page - make them fall over it!
- Don’t rely on your audience finding the appropriate links in the navigation bars – put the links where they are needed most – don’t make them think!
Be careful not to overdo the number of links in body text
- Rather than pepper a passage with many links, consider a separate section at the end that lists related links
- By doing this, you can provide better labels and more information for the links rather than compromising your original passage
Additional considerations:
Ideally place links at the beginning or the end of sentences or bullet lists – it makes them easier to read
If you can, try to avoid wrapping links over multiple lines (particularly when embedded in body text)
Notes and discussion points
What about the cross reference links used on this site?
They are just numbers that do not make sense out of context – why have your used them?
We originally had longer descriptive links that contained the title of the destination page such that they were fully meaningful out of context (for example, instead of '[see 1b]' a link would be '[see 1b – effective layout of page contents]'). When we tested this we found that:
- The length of the links actually upset the flow of the information presented in some of the bullet points
- The long links could be confusing when they wrapped over two lines
- The shorter links (such as we use now) were well understood and readily recognised as cross references
To assist with recognition of each link, we included the full title of each link in the title attribute such that it appears when the mouse hovers over the link in some browsers (such as, Internet Explorer)