Make Destinations Clear with Link Text
Hyperlinks are the bridges of the web — but vague phrases like “click here” or “read more” often leave users guessing where those bridges lead. Link text is incredibly important both to the user experience and to the accessibility of digital content.
Links in Digital Content
When navigating the web, it is common for readers (both sighted and those using assistive technology) to read links without reading the surrounding text. As such, linked text needs to be descriptive enough on its own that readers have a good idea of what will happen or where they will go if they click the link.
Descriptive links are especially useful for:
- Individuals who use screen readers due to low vision, blindness, or cognitive disabilities
- Users with limited motor control who may struggle to select single-word links
- People scanning content quickly or navigating via assistive technologies
Note On Compliance
For WCAG Level AA compliance, the purpose of the link should be determinable by the linked text and its surrounding context. For Level AAA compliance, the purpose of the link should be determinable by the link text alone.
Writing Effective Link Text
Write link text that makes it clear what the purpose of the link is or what users can expect if they click on the link. When URLs themselves are used as hyperlinks, screen readers read aloud every letter, dash, slash, and dot of the URLs, making it very distracting to their users.
Link Words That Reveal Link Purpose
Avoid generic link text that hides the purpose of the link:
- Learn more
- Click here
- This link
- More
Instead, link the words that describe the link destination, revealing why you would click on the link. These action-based examples are especially good for button text:
- Learn how to apply
- Explore our programs
- Download brochure
Sometimes, when looking at a sentence that has generic link text, simply changing the words that are linked will improve clarity. For example:
- Generic link text: Learn more about the 12th Man.
- Specific link text: Learn more about the 12th Man.
Describe Link Destination in Link Text
Sometimes, more action-driven link text (as seen in earlier examples) is difficult to fit into paragraph-like copy. In these instances, it is better to work in words that match (or nearly match) the H1 heading of the page you are linking to. This provides a better user experience as it is obvious when users arrive on the linked page that they are arriving at the correct destination.
Use Distinct Link Text To Go to Different Locations
Each link on a page should have unique link text, unless two links are going to the same destination.
- Links with different text should not go to the same destination. Meaning, if you have two links that both say “Texas A&M University,” both of those links need to go to the same place.
- Links with the same text should not go to different destinations. Meaning, if you have two links that go to www.tamu.edu, they need to have the same link text.
Practical Tips for Links
- Avoid generic link text like “click here.”
- Link words that reveal where users will go if they click the link.
- Write links that make sense out of context.
- Use phrases, not single words, to make links easier to select and understand.
- Use unique link text for links going to different destinations from the same page.
- Include alt text for image-based links that clearly describes the destination.
- Use a URL shortening service to create a customized and meaningful URL for documents that will be printed.
Styling Links
A link is much easier to see when its style is different from surrounding text. Consistently differentiate links in the body of the page with underlines or something other than color alone. Hyperlinks should have adequate contrast, allowing text to be distinguishable from the background color and from the color of the surrounding text. Best practice is to use at least two visual indicators to indicate a link.
Examples of Descriptive vs. Non-descriptive Link Text
Following are examples of inaccessible link text along with corrected examples. The main issue with the inaccessible links is that they do not clearly indicate a specific destination.
Examples of link text which is not ideal:
- Example 1: Click here for instructions.
- Example 2: Learn more about color and accessibility here and here
- Example 3: Story 1-Full Title (Read More) | Story 2-Full Title (Read More)
- Example 4: Accessibility 101 (Register) | Accessibility 102 (Register)
Corrected examples:
- Example 1: Instructions for the tool are available online.
- Example 2: Learn more about contrast and color coding,
- Example 3: Story 1 full title, Story 2 full title
- Example 4: Register for Accessibility 101 | Register for Accessibility 102
Note: “Click here” and “read more” may be acceptable in newsletters or other select circumstances if paired with descriptive HTML code. However, it is best practice to modify your link text to be descriptive instead, especially if you are unable to add the requisite code.
Foundational Accessibility Concepts
Learning foundational accessibility concepts will help you create more accessible content regardless of tool or platform.