Anticode Open builder

Accessible link text: write links that make sense out of context

A link's words should say where it goes. "Read the cancellation policy" works when it's read on its own, in a list of links or by a screen reader; "click here" doesn't. Make the destination the link text, keep it short, and make links look like links, which in running text usually means an underline.

Updated · By the Anticode team

Why link wording matters

Many screen reader users pull up a list of every link on a page and choose from it, or tab from link to link. In that list, the surrounding sentence is gone. A page with six links called "click here" and three called "learn more" gives them nine identical choices. Sighted visitors skim the same way: links stand out from body text, so their words are read first.

WCAG's Link Purpose (In Context), a level A criterion, asks that each link's purpose can be worked out from its text, or from its text together with its programmatically determined context: the same sentence, paragraph, list item or table cell. So "click here" can technically pass inside a sentence that explains it. It's still poor practice, because the context is lost in a links list, and putting the meaning in the link text costs nothing.

Link text best practices

  1. Link the noun, not the instruction. "Download the [price list]" rather than "[Click here] to download the price list".
  2. Front-load the distinctive word. "Opening hours and parking" is easier to scan than "Information about our opening hours".
  3. Give different destinations different words. Two links with the same text should go to the same place.
  4. Keep it short, but complete. Two to six words is typical. A whole sentence as a link is hard to scan.
  5. Say when it's not a web page. "Menu (PDF, 2 pages)" warns people before they download.
  6. Avoid raw URLs in text that will be read aloud, unless the address itself is the point, such as a short domain.

Descriptive link text, before and after

Rewriting vague links
VagueDescriptive
Click here to bookBook a table
Read more (under every card)Read the Hale Street case study
Learn moreHow the deposit works
Here is our menuSee this week's menu
www.example-salon.co.uk/termsBooking terms
DownloadDownload the brochure (PDF)

"Read more" on cards is the most common case. The cleanest fix is to drop the separate link and make the card's title the link. If the design needs a visible "Read more", the accessible name can be extended with aria-labelledby pointing to the title, though changing the visible words is simpler and helps everyone.

Do links need underlines?

In running text, nearly always. WCAG's Use of Color criterion says colour can't be the only thing that tells a link apart from the words around it. One sufficient technique allows colour alone if the link has at least 3:1 contrast with the surrounding text, but that's hard to hit while also keeping 4.5:1 against the background, and it still leaves colour-blind readers guessing. An underline settles it. Links in clearly separate places, such as a navigation bar or a row of buttons, don't need underlines because their position and shape already say they're interactive.

  • Keep the underline slightly offset and thin so it doesn't cut through descenders: text-underline-offset: 0.2em.
  • Give hover and focus a visible change beyond colour, such as a thicker underline.
  • Don't underline text that isn't a link. Readers will try to click it.

New tabs, icons and empty links

Opening links in a new tab is usually unnecessary; if you do it, say so in the text or with a visually hidden note, because the back button stops working. An icon-only link, such as a social icon, needs an accessible name from aria-label or hidden text. And a link must go somewhere: href="#" and empty links read as links but do nothing, which is a dead end for everyone. For the related heading outline, see heading structure for accessibility; for the clickable area itself, touch target size.

Link text in Anticode

Anticode checks that links lead somewhere; it doesn't write or judge their wording. The Critic flags dead links on every build: an empty href, a bare #, or a link to a section that doesn't exist on the page. Since 23 October 2026 the publish gate also refuses pages with an empty link, # or a javascript: link. Sentinel checks that any link opening a new tab carries noopener. The gate doesn't check that outside addresses work, so test links to other sites yourself after publishing.

The words are yours. You can rewrite link and button text in place with the visual editor, or in a sentence as a change request, such as "rename the Learn more buttons to say what each service is".

Questions people ask

Is "click here" an accessibility failure?

Not always under WCAG, if the surrounding sentence explains it. It's still bad practice because it's meaningless in a list of links.

Can two links have the same text?

Only if they go to the same place. Different destinations need different words.

Should link text say it opens a new tab?

Yes, if it does. Better still, let links open in the same tab unless there's a strong reason not to.

Sources

  1. Understanding SC 2.4.4: Link Purpose (In Context), W3C, checked
  2. Understanding SC 1.4.1: Use of Color, W3C, checked