vocab.design

component

Link

also called hyperlink (community), anchor (community), text link (community)

A control that navigates somewhere, named for its destination, and carrying the browser affordances of a destination (open in new tab, copy address).

A link is the one control with an address. That is not a technicality: the address is what lets a reader hover to see where they are about to go, open the destination in a new tab, copy it into a message, bookmark it, and come back to it later through history. None of those are features anyone builds. They come free with an <a href> and they are all lost the moment the same behaviour is rebuilt on a click handler, which is why “make it a link” is a decision about what the control is, not about how it is painted.

The test is where the reader ends up. If activating it takes them somewhere (another page, another view, a fragment further down this one), it is a link, even when it is drawn as a filled button. If it changes something where they already are, it is a button, even when it is drawn as blue underlined text. The two also answer different keys, which is the part that quietly breaks: a link activates on Enter alone, a button on Enter and Space. A reader who presses Space on a fake link scrolls the page instead.

Name it for its destination. “Read the refund policy” and “Pricing” are links; “click here”, “more”, and “read more” are the same string repeated down a page, and a screen-reader user pulling up a list of links gets a list of the word “more”. Underlining in body text is not decoration either: colour alone is the one distinguishing feature people with limited colour vision cannot rely on, so inside a paragraph the underline is what makes the link findable at all. Outside prose (a nav bar, a card that is entirely one link) position and context can carry that job instead.

Visited styling is the oldest affordance the web still has and the most often thrown away. A link that changes colour once followed turns a list of results into a map of where the reader has already been, which matters most on exactly the pages people scan repeatedly. It costs one selector, and browsers deliberately limit what that selector can change, so it is worth spending the colour on.

Which word?

If you wantsay
the control goes somewhere rather than doing somethinglink
the control does something instead of going somewherebutton
naming the least emphatic button variantghost button
a control looks like a button but navigatesbutton versus link
marking a link without relying on color aloneunderline

Implementations

Specimens illustrate the concept; for production use, start here.

aria-apgLink

Sources