Provide descriptive link text

Applicable Role(s): Content Creator, Developer

Overview

Meaningful link text helps users know where the link will take them, which makes it easier to navigate across websites. Link text that isn't clear or accurate tends to create a confusing experience, or makes users unsure the link they're clicking on is safe.

Best Practices

Link text should describe where the user will go

Informative link text tells the visitor what page they will end up on if they activate the link, or what that URL's content is about. The main content title of the URL usually makes good link text--if you're linking to a page titled "Creating valid and accessible links", then that can be used as the link text: Creating valid and accessible links.

Link text must be unique for each link

If there are links that have a similar purpose but go to different URLs (examples: different articles, register links), the link text should be different for each of them. So rather than 5 links all called "continue reading", the 5 links could be formatted as "continue reading: [article title]" to ensure the reader can detect how they're different.

Good link text length is long enough to convey meaning

While there's no suggested minimum or maximum word count for link text, the user should be able to quickly know what the link will be about. Links that are too long (spanning entire phrases or multi-line paragraphs) can take a while to listen to with text-to-speech tools without being able to pause.

Likewise, too-short link text may not be clear enough; it could also physically be harder to activate if the user's on a mobile device, or finds it difficult to click smaller link targets.

Guides for linking images or icons

Pattern Examples

Link text patterns to avoid

"Click Here"/"Here"

There is a new policy about web accessibility. Click here to read more about it. This program is provided by the provost...

You can find more resources for creating accessible websites here.

Why avoid "Click Here"/"Here?

Having text telling a user to click on a link is unnecessary, since most users are aware links can be clicked to be activated. Additionally, repetitive and non-descriptive links cause issues for assistive technology users. (See next example.)

What to do instead

There is a new policy about web accessibility provided by the provost...

More resources for creating accessible websites.

"Click the link below, above, to the left, etc."

Click the link below to watch short, informational videos on making accessible content.

How to Videos

Why avoid "click below/above?

People that use text-to-speech software or braille displays may not be able to navigate to the link with visually-based instructions alone. We know the link's "below," but how far "below" the paragraph will they need to go to find the link—2 paragraphs, 3, 4, etc.?

The location of the link may also depend on the page layout. While the link may visually appear left of main content on the desktop, it could end up above the main content in phone/tablet modes, so the instruction to find links on "the left" isn't accurate in that case.

It's more useful to either make the link part of the sentence itself, or to describe the link's meaningful text when pointing a user to a link.

What to do instead

Watch some short, informational videos on making accessible content.

Click the "How-To Videos" link to watch short, informational videos on making accessible content.

How to Videos

"Click the button"

Click the button to learn about layout builder.

Layout Builder

Why avoid "click the button"?

This pattern has the same issues as "click above/below"—it's making the user search for a link when the text itself could be the link—but presents another challenge. Calling it a button when it's really a link can confuse users that rely on HTML semantics to find lists of links or buttons, and get to where they're going.

While the previous example link has some styling that may look similar to buttons around the web, its underlying purpose is to take the user to a new page or URL, which is what links do. True buttons in a webpage will make something happen on a page but won't take the user anywhere (like accordions, which expand/collapse content when activated).

Examples of links vs. buttons:

I'm a default link

I'm a link with some styling applied

What to do instead

More Layout Builder resources

The "Layout Builder" link will teach you how to build awesome-looking webpages.

Layout Builder

Note: The question to ask is: "will the user go to the new page if they activate this control?" If so, it's not a button and should be called a link instead—even if it has additional styling.

"Read More, Learn More," etc

You'll learn how to write awesome HTML. Read more.

Why avoid "Read More, Learn More?

Screen reader technology can navigate by links out of context of the webpage. When they do this, they are presented with a list of all links on the page. Imagine encountering a list like this:

  • Click here
  • Here
  • Here
  • Click here
  • Read More
  • Read More
  • Read More
  • Read More
  • Read More

Would you know where to click?

What to do instead

Ask, is this read more link actually necessary, or can the link be put onto the content instead?

If a Read More link is necessary, and it is clear from visual context what the link associates with, then add a visually hidden descriptor to make it clear to a screen reader user what they will be "reading more" about.

Example code:

<a href="//designsystem.wwu.edu/link-destination">Read more <span class="visually-hidden">about how to write awesome HTML</span></a>

"Link to [destination]"

We have many writing resources available. Link to writing resources.

Why avoid "Link to..."?

Calling a link by name is unnecessary, because they have styles to set them off from surrounding text. Screen readers also announce links, so hearing "Link, link to writing resources" is redundant.

What to do instead

Check out our writing resources, or our publishing resources.

Placing the full URL in the text

Web Accessibility Resources: https://designsystem.wwu.edu/accessibility

Our Drupal 8 Resources, found at https://designsystem.wwu.edu/drupal-8-layout-builder, will be very helpful to you in your web development journey.

Our website, https://designsystem.wwu.edu/, is a great resource for finding out about the Western Brand.

Why avoid the full URL?

Having gigantic URLs in the middle of content breaks up the flow of information. At best, it is unsightly, and at worst it makes it difficult to interpret content and scan information. Screen readers will announce the whole URL, which can be a pain to decipher.

What to do instead

Web Accessibility Resources

Our Drupal 8 Resources will be very helpful to you in your web development journey.

Our website, designsystem.wwu.edu, is a great resource for finding out about the Western Brand.