- Guide people around your content
- View or download documents and other files
- Access applications or other websites to complete a task
- Go to other related pages or websites for additional information
- Provide a quick way to email someone or get other contact details
Using links poorly can really hamper someone’s experience of your website and can even make it unusable (inaccessible) for certain people.
Creating clear and effective links that improve the accessibility and usability of your pages is really easy, there are just a few simple rules you have to follow. These rules do not only apply to websites, as you should use these same principles in emails, documents, blogs, wikis and social media.
Use descriptive link text that makes sense when read out of context
The link text you use should clearly indicate where the link goes to or what will happen if when you click it, without needing context. Link text must not be vague e.g. click here and must never include the web address e.g. http://www.imperial.ac.uk/staff/tools-and-reference/web-guide/. The same applies to email addresses, as it is recommended to use the name of the recipient as the link text i.e. the person or team rather than the email address.
Why is this important?
Accessibility
For visually impaired users who rely on screen reading tools such as JAWS or NVDA to tell them what is on the page, having descriptive web links is vital. Screen reader users often configure the tools to read out all the links to them first. If you have a link that doesn’t describe either what will happen (call to action) or where they will go when they click it, then they will not be able to navigate your content. This is why vague links such as click here, find out more, go here etc. are really bad.
Usability
The vast majority of people scan web pages rather than read every word. They look for links to help guide them on where they need to go next. Having non-descriptive link text means they need to read the text around the link to get the context. This will really frustrate people who have come to your pages for a specific reason.
Use unique link text for each destination
You should not use the same link text to go to different locations.
Why is this important?
Accessibility
If screen readers are set up to read out all the links to them first, then they will hear a list of the same link text, but if each version of that link goes to a different page then they will not know which one they want. For example, if you had a web page which talks about the Imperial campuses with these two links:
- Download the South Kensington map
- View the South Kensington map
You may think it is clear that these two are different, but because the linked part of the text is the same, then screen reader users will get:
They will not immediately know which of these links to a Google map and which downloads a PDF. This can easily be fixed by changing the links to:
Top tips for effective links
- Every time you add a link to a page, imagine each link was on its own and had no text before or after. Ask yourself, would you know where that link would take you?
- If you are using Terminalfour (T4), always try and use the section link feature to create your link for you. This will automatically generate the link text based on the name of the page for example:
You can browse our full list of Courses for 2019-20.
This has the added benefit of automatically updating if the title of the page changes, for example, Courses 2020-21. - Test your page with a free screen reader such as NVDA (Windows) and see if the links make sense.
- When referring to someone online their name should be linked to their email address e.g. Contact Joe Bloggs.
- If you are linking to a document, state the file type and if possible the file size. This will indicate to the user that they are about to download something. This is particularly important for people using phones where device storage or data plans may be limited.
Examples of how to improve link text
Example 1
Click here to download our terms and conditions
Change to: Download our terms and conditions (PDF, 4.2MB)
Example 2
Go to this web page for our master’s course list.
Change to: The Courses for 2019-20 page has a full list of our master’s courses.
Example 3
Visit us our webpages: http://www.imperial.ac.uk/openaccess
Change to: Visit our Open Access site
Example 4
Email Joe Bloggs - j.bloggs@imperial.ac.uk
Change to: Contact Joe Bloggs.
Further reading
- Writing Hyperlinks: Salient, Descriptive, Start with Keyword - Nielsen Norman Group
- “Learn More” Links: You Can Do Better - Katie Sherwin, Nielsen Norman Group
- Referring to web and email - Writing style guide
Check out our good example page for inspiration on writing effective link text.