Link

The link is the oldest component on the web and the one most often rebuilt as something else: a div with a click handler, a button that loads a page, a card where the whole rectangle reacts and none of the text can be selected. The element you pick decides what the browser hands you for free.

Anatomy of a link

The colour and the underline do the same job twice, on purpose. A link marked by hue alone stops reading as a link for the 8% of men with some form of colour vision deficiency, in greyscale print, and on a phone in daylight.

Here it is working. Hover it, then press Tab to reach it with the keyboard.

Variants

Inline. Inside a sentence. The underline is what separates it from the words either side, so this is the one place it is not optional.

Standalone. A nav, a list, a footer. Space and position already mark it, so the underline can go, as long as hover and focus both say something.

External. Leaves the site, or opens a new tab. Icon and words together, both inside the link, so the warning is part of the name a screen reader reads out.

Download. Put the format and the size in the link text. "Media kit (PDF, 2.4MB)" tells someone on a train whether to press it.

Styled as a button. Still an <a href>. The paint is a design decision and the element is a behaviour decision, and they are allowed to disagree.

States

Visited is the state everyone drops. Browsers restrict it to colour properties, and getComputedStyle deliberately reports the unvisited value, because anything richer could be measured and turned into a reading of someone's history. So a visited colour is all you get, and on any page holding a long list of results it is worth having. The grid above paints that cell, because whether a link counts as visited depends on your own history.

The current page still needs marking in code. aria-current="page" is the part people forget. Leaving it as a link is fine, and removing the href is also fine. What matters is that it looks different and says so to a screen reader.

How a link behaves

The browser does the work. Middle click, cmd-click, right click, copy link address, open in a new tab, the back button, history, the URL in the status bar. Every one of those is free with <a href>, and every one of them is gone the moment it becomes a div.

Enter follows it, Space scrolls. That is the one keyboard difference from a button, and it is why a div pretending to be a link fails quietly for people who reach for the key they expect.

No href, no link. An <a> without one is not focusable, sits outside the tab order, and reports as generic in the accessibility tree.

The back button has to return them. If following a link leaves a scroll position, a filter or a form value behind, people press back, find a page they do not recognise, and leave.

Link accessibility

Link text out of context

Screen reader users can pull every link on a page into one dialog. NVDA and JAWS both do it with Insert+F7, and VoiceOver has the rotor. In that list, the sentence around each link is gone.

WCAG 2.4.4 at Level A accepts text that makes sense in its context, which is how "Read more" inside a card passes. 2.4.9 at Level AAA asks the link text to work on its own. Write for 2.4.9 and both are covered, at no cost to anyone reading the sentence.

Keyboard

Rebuild a link from a div and you lose the tab stop, Enter, the context menu, the middle click and the URL in the status bar. role="link" puts the name back in the accessibility tree and gives you none of the behaviour.

The rest

• Contrast. The link text needs 4.5:1 against the background (WCAG 1.4.3). Where colour alone marks it inside a block of text, it also needs 3:1 against the surrounding text plus a cue on hover and focus (technique G183). An underline removes that second requirement.
• Never colour alone. WCAG 1.4.1. The underline is the cheapest way to satisfy it.
• Focus visible. Required at Level AA (2.4.7).
• Target size. 24 by 24 CSS pixels at Level AA (2.5.8), with an exception written into the criterion for links inside a sentence. Standalone links get no exception.
• New windows. WCAG 3.2.5 at Level AAA asks that they open on request. Saying so in the link text turns it into a request.

What a link should say

Name the destination. "2026 pricing" beats "here". The words are what someone reads, scans, searches for and hears in a link list.

Link the words that name the thing. In "see the refund policy", three words are the link and the other two are not.

Front-load the difference. In a list of links, people read the first two words. "Refund policy" and "Returns policy" separate faster than "Our policy on refunds" and "Our policy on returns".

Same destination, same words. Different destination, different words. WCAG 3.2.4 asks for consistent naming, and two links called "Details" going to different places is the version that costs people time.

Drop "link to". A screen reader already announces "link", so "link to pricing" is heard as "link, link to pricing".

Give files their format and size. "(PDF, 2.4MB)" is the difference between a download and a surprise.

Sentence case, no full stop.

Common link mistakes

Open a screen reader's link list on a news homepage and the same three words often come back twenty times over.

1. Link text that only works in place. "Read more", "Learn more", "Here". They read fine in the sentence and mean nothing in a list.

2. href="#" with a click handler on top. It writes a # into the address bar, jumps to the top of the page in some browsers, and adds a history entry that breaks the back button. If nothing loads, it is a button.

3. New tabs by default. It removes the back button, which is the control most people use to undo a click. Someone who wants a new tab already knows three ways to ask for one.

4. Colour with no underline inside a paragraph. The most common WCAG 1.4.1 failure on a marketing site, and the easiest to fix.

5. The whole card wrapped in one anchor. The text stops being selectable, and the accessible name becomes every word in the card read as a single link.

6. A button where the page loads. Middle click, right click, open in a new tab and copy link address all stop working, and nothing on screen explains why.

7. Removing the focus ring. It fails WCAG 2.4.7 and strands every keyboard user. If the default ring is ugly, draw a better one.

How to build a link

<!-- Navigation. The href is the whole thing. -->
<a href="/pricing/">See pricing</a>

<!-- Somewhere else on this page -->
<a href="#refunds">Refund terms</a>

<!-- A file. download names the saved copy. -->
<a href="/media-kit.pdf" download>Media kit (PDF, 2.4MB)</a>

<!-- An email, and a phone number -->
<a href="mailto:hello@example.com">hello@example.com</a>
<a href="tel:+442071234567">+44 20 7123 4567</a>

<!-- Leaves the site, and says so -->
<a href="https://example.org/" target="_blank" rel="noopener">
  Example (opens in a new tab)
</a>

rel="noopener" stops the new page reaching back through window.opener. Safari, Firefox and Chrome all made it the default for target="_blank" between 2019 and 2021, and it is one attribute worth keeping for anything older. Add noreferrer where you would rather not send the referring URL, and rel="nofollow ugc" on links other people have posted.

The skip link is the one link most sites are missing.

<a href="#main" class="skip-link">Skip to content</a>

It comes first in the source, hides itself until it takes focus, and never hides with display: none, because that takes it out of the tab order and leaves you with the markup and none of the help.

Edge cases

A link that wraps across two lines. It becomes two rectangles. Focus draws around both, and a background highlight breaks at the line end unless you set box-decoration-break: clone.

The clickable card. Put the anchor on the title and stretch it over the card with a pseudo-element. The title stays the accessible name, the rest of the text stays selectable, and the whole rectangle stays clickable.

mailto: on a machine with no mail client. The click does nothing anyone can see. Use the address itself as the link text so it can be read and copied when the handler fails.

Anchor links under a sticky header. The target lands behind it. scroll-margin-top on the heading fixes the scroll, and WCAG 2.4.11 asks that a focused element never end up fully hidden behind sticky furniture.

Windows High Contrast Mode. System colours replace the link colour, so a link marked by colour alone becomes ordinary body text. The underline survives.

Links in real products

GOV.UK underlines every link in body text and thickens the underline on hover, so the hover cue is a shape rather than a shade. Their default is to open links in the same tab, and to say so in the link text on the rare occasion they do not.

Wikipedia colours a link blue when the page exists and red when it does not, so the colour carries a fact about the destination before anyone presses it. Purple for visited has survived 25 years of redesigns, on the site where a visited colour is worth the most.

Google search results put the site name and the path above the title, so people can see where a result goes before they commit to it. The title still turns purple once visited, a convention most product interfaces quietly dropped.