Body
This article introduces students and employees to the core accessibility skill: Creating accessible and descriptive hyperlinks.
What and Why Accessible Hyperlinks?
Hyperlink text (also called anchor text) is the underlined text that is clickable and leads to a destination.
Accessible hyperlinks (anchor text) should always be descriptive (explain where the link will take you) and unique (each link will have a different name).
By creating hyperlinks with accessibility in mind, all users will have an easier time finding links and will know where each link will take them before they click. This gives each user more control over what they want to spend their time on and avoids having to open every link to see what it's about.
Note: It is best practice to avoid using underline in digital materials, unless it is an underline that is created with a hyperlink. Instead use bold or another way to emphasize an idea in digital space. Underlining digital content is confusing because sighted users will select the underline thinking it is a link.
How to Create Accessible Hyperlinks
-
People using assistive technologies often browse by link or button text alone. If links or buttons say things like “Click here,” “Read more,” or “Edit, " it’s unclear where they lead or what action they trigger. This lack of context creates barriers to understanding and navigation.
Best Practices for Accessible Links
Accessible Link Examples: Do, Avoid, and Why?
The following examples provide additional examples of what to do (column 1), what to avoid (column 2), and a review of why (column 3).
Table: Do's and Don'ts with Accessibles Links
|
Do
(Accessible Links)
|
Avoid
(less accessible)
|
Why is the “do” (first column) better?
|
|
Learn more about Contrast and Color Accessibility
|
More
|
The first-column example is more descriptive and clearer, explaining what the link leads to, making it accessible and meaningful. The second column is vague and requires clicking the link to learn what it takes you to.
|
|
Read our guide on Alt Text and Image Descriptions: What, why, how
|
Read our guide on alt text and image description here
|
Link to the name or some part of the description of where the link takes you. When a link is simply labeled as “here” or “this”, and when there are multiple links on a page or document, anyone using a screen reader will need to click open each “here” link to simply try to find the link that interests them.
|
|
Service: Digital Accessibility Services
|
https://services.stthomas.edu/TDClient/1898/ClientPortal/Requests/ServiceDet?ID=53794
|
Descriptive vs. bare URL (A bare URL is a web link that is pasted directly into a document or text without any descriptive text or formatting. It just shows the raw URL itself)
|
|
Edit your profile setting (link to that phrase)
|
Instead of “edit”
|
A few more examples of accessible links or buttons that provide description and meaning when ready alone outside the context of the page.
|
|
Download the 2024 Annual Report (PDF, 2.3 MB)
|
Instead of “download”
|
Download does not describe what item is being downloaded. If there are several uses of that term in a document or website page, it makes it difficult to know where that link is taking you too.
|
|
Submit contact form
|
Instead of “submit”
|
|
Exception: Occasionally Spelling Out the URL is Okay
On occasion, it will make sense to list a URL that is not necessarily descriptive.
For example, with email addresses, you want the link to be the email address and the link location to be mailto:EMAIL-ADDRESS. In that case, you may prefer to list as example@stthomas.edu vs Example Email.
Also, if you have both paper and digital content, you may include both the accessible link and the written URL so the paper version also communicates the link to sighted users.
For Further Resources on Accessible Links