Provide descriptive link text
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"
- "Click the link below/above/etc."
- "Click the button"
- "Read more/learn more"
- "Link to [destination]
- Using the full URL
"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...
"Click the link below, above, to the left, etc."
Click the link below to watch short, informational videos on making accessible content.
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.
"Click the button"
Click the button to learn about 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 link with some styling applied
What to do instead
The "Layout Builder" link will teach you how to build awesome-looking webpages.
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.
Hocus Focus is a game about keyboard accessibility. Learn 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
Like the "click here/here" example, the link can either be added to existing text, or rewritten to clarify the link's purpose.
You'll learn how to write awesome HTML.
Halloween may be a few months away, but this quick game shows why sites need to be keyboard accessible. Avoid the monsters and traps in Hocus Focus.
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://brand.wwu.edu/accessibility
Our Drupal 8 Resources, found at https://brand.wwu.edu/drupal-8-layout-builder, will be very helpful to you in your web development journey.
Our website, https://brand.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
Our Drupal 8 Resources will be very helpful to you in your web development journey.
Our website, brand.wwu.edu, is a great resource for finding out about the Western Brand.