Link

A link navigates. A button acts. That is the whole distinction, and most products get it wrong in at least one direction.

The consequence is not stylistic. An anchor with an href can be middle-clicked, opened in a new tab, copied, bookmarked, and followed by a crawler. A div with a click handler that looks identical does none of that, and a keyboard cannot reach it.

When it is a link

The destination is a URL. Somebody should be able to share it, return to it, or open it in a second tab while keeping this one.

When it is a button

Save, delete, submit, open a modal, toggle a panel. Nothing in the address bar changes. See button design.

The awkward middle is a navigation that looks like an action — "Start free trial" leading to /signup. That is a link, styled as a button. Style is free; the element is not.

Underlines

Inside body text, underline them. Colour alone is a failure for anybody with a colour vision deficiency, and WCAG 1.4.1 treats it as such.

In navigation, position carries the signal — a row of items in a header is understood as clickable — so hover and focus styles are enough.

The pattern that fails quietly is the half-measure: body links in a slightly different shade with no underline, which passes a designer's eye on a calibrated screen and disappears on a phone in daylight.

Writing them

Describe the destination in the link text. "Read more" eleven times on a page produces eleven identical entries in a screen reader's link list.

Front-load the distinguishing words. People scan the first two. "Pricing for teams" beats "Learn about our pricing for teams".

Do not put the URL in the text unless the URL is the point. https://example.com/docs/v2/reference/authentication read aloud character by character is a small cruelty.

New tabs

Body text links should not open new tabs. The back button is the control people reach for, and a new tab removes it.

The defensible exceptions are downloads, and references meant to be consulted alongside a form somebody is filling in. Both should say so in the link or beside it, because an unannounced new tab reads as a broken back button.

States

Five, and most implementations ship three.

Default, hover, focus (a visible ring, keyboard users depend on it), active, and visited. Visited is the one almost universally dropped, and in documentation or a long reference index it is the state that saves people from reading the same page twice.

Targets

WCAG 2.2 sets 24 by 24 CSS pixels as the floor, with an exemption for links inline in a sentence. Dense lists of small links — footers, tag clouds, table cells — are where the exemption does not apply and the failure usually is.

In practice

A B2B dashboard renders its table rows as clickable divs. The row navigates to a record.

Three things break. Nobody can open a record in a new tab, which is how account managers compare two customers. Keyboard users cannot reach the rows at all. And support gets asked for a way to send a colleague a link to a specific record, which exists in the address bar but cannot be reached without clicking through.

Replacing the handler with an anchor on the primary cell fixes all three, and changes nothing visually.

Where teams get it wrong

• A div with a click handler. No keyboard, no new tab, no crawl.
• A button that navigates. The address bar changes, the element says it did not.
• Colour without an underline. Invisible to some readers, faint to the rest.
• "Read more" repeated. A list of identical entries.
• Silent new tabs. A back button that appears broken.
• No visited state. The same page read twice.