Link
Navigates to a destination, and must look different from surrounding text.
Definition
A link takes the user to another location. It must be identifiable without relying on colour alone, and its text should describe the destination rather than the act of clicking.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Navigating to another page or view.
- Linking to external resources or files.
Common mistakes
- Colour-only link styling.
- Non-descriptive link text.
- Links styled as buttons that then behave as buttons.
Requirements
- Underline links inside body text. Colour alone fails WCAG 1.4.1 and is hard to spot in dense prose.
- Link text should make sense out of context, since screen reader users can list all links on a page. 'Read more' repeated eleven times is useless.
- Mark links that open in a new tab, and prefer not to force that decision on the user.
- Give links that download a file the file type and size in the text.
- Visited state helps orientation in reference content and can be omitted in applications.
Link text, and what it costs
Screen reader users routinely pull up a list of links on a page and read it out of context, which is where vague labels fail.
| Text | Out of context | Better |
|---|---|---|
| Click here | Meaningless | The destination named: 2026 pricing |
| Read more | Repeated forty times, all identical | Read more about refunds |
| Learn more | Same problem, politer | The subject, as the link text |
| The raw URL | Read aloud character by character | The page title, with the URL visible in print |
| Here | Nothing | The noun phrase around it |
In practice
- i.
Links that are really buttons
The wrong elementAn anchor with no href that runs JavaScript is unreachable by keyboard, invisible to the browser's link handling and unopenable in a new tab. If it acts rather than navigates, it is a button.
- ii.
The underline that was removed
Colour aloneLinks styled only by colour in body text fail for anyone who cannot distinguish that colour from the surrounding text, and the failure is silent: people simply do not know the link is there.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Button
ComponentA control that performs an action in the current context rather than navigating.
Key difference
A button does something on the page you are on. A link takes you somewhere else. The difference is not visual: it decides keyboard behaviour, middle-click, open in new tab and what a screen reader announces.
Use Link when
- The destination has a URL, in-page anchors included.
- Opening it in a new tab or copying the address should work.
- The text can name where the reader is going.
Use Button when
- The result is a change of state, not a change of location.
- It submits, saves, opens, toggles or deletes something.
- There is no URL that would make sense to open in a new tab.
Local chart
CMP·002 · Region III · Grid F1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- Affordances and SignifiersPRIN·007 · Principle
- ContrastFND·002 · UI foundation
Depends on
Get these right first, or this one will not hold.
- Accessible NamesA11Y·008 · Accessibility
- Use of ColorA11Y·010 · Accessibility
Often used with
These usually appear in the same screen or the same decision.
- CardCMP·022 · Component
- NavigationPAT·001 · Pattern
Related concept
Connected closely enough to change how you apply this.
- MicrocopyWRT·001 · UX writing
- SEO for Content ProductsWRT·007 · UX writing