Using Links Effectively
Relates to Siteimprove Error - 2.4.4 Link Purpose (In Context):
- Link text is too generic in its current context.
- Link text used for multiple different destinations.
After headings, people using screen readers and other assistive technologies will often review the links on a web page to determine if there is a link relevant to the content or task they are trying to complete. Therefore, it is important that all links provided within the content of a website are both descriptive and that the link format is consistent.
Descriptive Links and Examples
Link text should be as descriptive as possible. So, avoid the classic link text, such as 'Click Here' and 'Read More.' They are not accessible because they depend on their visual context in order to understand them.
Examples of Bad and Good Practice
An example of bad practice:
- Click here to submit your request.
- Read more about how we are developing our web practices to improve accessibility on our website.
An example of good practice:
Here are a few more examples showing how to make links more descriptive:
Click here to download our Equality and Diversity Policy.
Go to this web page to search the list of undergraduate and postgraduate courses available at the University.
Change to: Our combined course search page has a full list of the undergraduate and postgraduate courses available at the University.
Explaining Link Text and Multiple Different Destinations
Alongside ensuring that you do not use generic text for links within your web content, it is also important to use a consistent link format. The Siteimprove error 'Link Text used for Multiple Different Locations' will highlight any instances of the same link text being used but that have underlying links that go to different destinations.
To put this into context, CMS users may create content for a web page, and as part of that content there is a requirement to use the same link and link text more than once. This may be to reference another website, report or resource. It is important that the same link format is used for every instance of that link and link text combination.
For example, the links below have the same link text, and may end up at the same destination but the link format is slightly different:
- Visit the Web Support Team Website - (Link format - https://www.qub.ac.uk/sites/web-support-team/)
- Visit the Web Support Team Website - (Link format - http://www.qub.ac.uk/sites/web-support-team)
Notice the differences between the first and second links (https vs http) and the trailing slash (/) at the end of the first link. They are small differences but screenreaders and other assistive technology may interpret them as different or separate links.
When linking to external reports and documents, you do not need to add a trailing slash:
- Download our Equality and Diversity Policy - (https://www.qub.ac.uk/directorates/HumanResources/hr-filestore/Filetoupload,866894,en.pdf)
- Download our Equality and Diversity Policy - (http://www.qub.ac.uk/directorates/HumanResources/hr-filestore/Filetoupload,866894,en.pdf)
But do ensure that 'https' is used at the start of the URL.
Tips for Ensuring Link Consistency:
Linking to another Queen's University Belfast website and/or external websites or resources
- The vast majority of University websites are now using the secure protocol (https) so please ensure all links begin with this i.e. https://www.qub.ac.uk/
- Make sure that all links have the trailing slash at the end of the URL (/) i.e. https://www.qub.ac.uk/sites/web-support-team/
Section and Content links
- Section Links: If you are linking to another section of your website within the CMS, please use the built in section link functionality. This will automatically output the format of the required link and the system will remember this link, should you need to move the content to another location within your website.
- Content Links: This will work in the same way if you are linking to a specific piece of content within your website, you can use the content link functionality.
Guidance - Link Text for Multiple Different Destinations
This video guidance will provide an overview of how to update 'duplicate link text' to fix the accessibility issue in CMS content relating to the same link text used for links going to different destinations.