- 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
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/.
Why is this important?
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.
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?
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:
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 Site Manager CMS (t4) always try and use the link wizard 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.
- 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
Click here to download our terms and conditions
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.
Visit us our webpages: http://www.imperial.ac.uk/openaccess
Change to: Visit our Open Access site
- Writing Hyperlinks: Salient, Descriptive, Start with Keyword - Nielsen Norman Group
- “Learn More” Links: You Can Do Better - Katie Sherwin, Nielsen Norman Group
Check out our good example page for inspiration on writing effective link text.