This knowledge base article explains how to create hyperlinks that are understandable for all users, including people with disabilities. When we follow good practice for writing links, we help to make a more inclusive and fair experience.
Hyperlinks can be created in documents, emails and websites.
To improve accessibility, hyperlinks should:
When creating a hyperlink, the descriptive text (also known as Text to Display) should provide a clear and concise description of the linked content.
Present links as descriptive text. Only present URLs (Uniform Resource Locator also known as web addresses) as display text when it is a requirement for the context of your publication (for example: thesis, published materials etc).
Use specific and meaningful descriptive text that indicates the destination or purpose of the hyperlink.
When a document has multiple hyperlinks going to the same destination, the descriptive text should always be the same. This gives readers a consistent understanding of the intended destination.
Ensure that the descriptive text provides enough context on its own, without relying on surrounding text. Users who navigate using assistive technologies often rely on the descriptive text alone to understand the purpose of the hyperlink.
Where it is helpful to your audience, include in the descriptive text aspects such as file type and size, or if it is an external site. For example:
Adding file size and file type helps inform readers who may be on a metered (pay as you go) internet connection or who may not have a tool to open that file type on the device they are using currently.
When we link to external web sites, particularly those that bombard users with content they may prefer not to read, it can be respectful to add context of where the link will take the reader.
The hyperlink location can also affect accessibility.
Consider placing hyperlinks at the start or end of a sentence or paragraph where it flows naturally.
Avoid placing hyperlinks in the middle of a sentence or paragraph, as it can be disruptive to users who are reading or listening to the content.
Format hyperlinks in a way that sets them apart from regular text, this is often done automatically.
Hyperlink text should be underlined and in a different colour.
We recommend keeping the default colour for links.
These practices help users to identify the links and separate them from the surrounding body text.
Some applications provide a "title" field to add further information about the link. This applies the text to what is known as the "title attribute". If available, leave this field blank:
---
These guides ensure that your hyperlinks are accessible to everyone. Creating clear, descriptive, and properly formatted hyperlinks contributes to an inclusive and user-friendly online experience.
1. Highlight the words or phrase you want to use as the descriptive text.
2. Right-click or navigate to the insert tab, select the hyperlink option.
3. Alternatively press Ctrl + K on windows, Command (⌘) + K on MacOS.
4. Type or paste your web hyperlink into the address field.
5. Select OK.
1. Highlight the words or phrase you want to use as the descriptive text.
2. Select the Format button from the messaging options tool bar.
3. Select the Insert Hyperlink button.
4. Alternatively press Ctrl + K on windows, Command (⌘) + K on MacOS.
5. Type or paste your web hyperlink into the address field.
6. Select Insert.
7. Re-highlight the words or phrase you want to use as the descriptive text.
8. Select the Underline text option or press Ctrl + U on windows, Command (⌘) + U on MacOS.
1. Highlight the words or phrase you want to use as the descriptive text.
2. Right-click or select the Insert/Edit Hyperlink button from the content item editor toolbar, or press Ctrl + K on windows, Command (⌘) + K on MacOS.
3. Type or paste your web hyperlink into the URL field.
4. Ensure the option "Open hyperlink in current window" is selected.
5. Select Save.
Below are examples of how to form links when writing in HTML, Markdown or LaTex.
<a href="https://www.https://www.southampton.ac.uk/">University of Southampton website</a>
[University of Southampton website](https://www.southampton.ac.uk/)
\href{ https://www.southampton.ac.uk/}{University of Southampton website}
---
Descriptive links section within the Introduction to Digital Accessibility Course in Blackboard
Digital UX Team’s section on links in their article Write web content that's accessible to everyone
Creating valid and accessible links by the Accessibility Project
Was this article helpful?
If you have any further comments, please put them below.
Please note that feedback is anonymous - if you require a reply or assistance, please raise a ticket via ServiceLine.
Thank you for your feedback, it is much appreciated.