A useful link answers three questions: where does it go, how do I activate it, and what happens next? People answer those questions in different ways. Some scan a page visually, some move through links with a keyboard, and some listen to a screen reader. Good HTML gives each approach a reliable starting point.

Accessible linking is part writing, part interaction design, and part testing. Start with the HTML link guide for the basic element, then use the decisions below to review navigation, editorial links, cards, and resource lists across a real site.

Use an anchor for a real destination

When an interaction navigates to a resource, use an a element with a meaningful href. Native links already participate in keyboard navigation and familiar browser features. A clickable container with an event handler requires additional work to reproduce those expectations.

<a href="/html-url/">Understand HTML URL structure</a>

When an interaction changes the current interface, such as expanding a panel or copying a value, a button is usually the appropriate starting point. A placeholder address such as javascript:void(0) does not turn an action into a useful destination. Decide what the control does before choosing its element.

This distinction also improves editorial review. An editor can inspect a real address, open it in a separate tab, and share it with a colleague. If a card requires JavaScript just to reach an ordinary article, investigate whether a standard link would express the same journey more clearly.

Write the destination into the link text

Replace vague labels with words that describe the resource or the next step. “Read the URL migration checklist” carries more information than “click here.” A link's meaning should remain understandable when a reader encounters it without carefully rereading the surrounding paragraph.

W3C's guidance on link purpose in context explains how meaningful names and associated context help people decide which links to follow. It also recognizes that context can be supplied by structures such as the containing sentence or list item. Descriptive visible text remains a useful default because it helps a broad range of reading methods.

For a list of articles, make each article title the link. Repeating “read more” beneath every card creates unnecessary interpretation work. If the destination offers a specific format, say so: “Download the migration checklist PDF.” Keep the wording close to the title users will see on arrival.

Do not stuff the label with every keyword associated with a page. A link is a decision point. Include enough detail to distinguish the destination, then let the surrounding sentence carry the explanation. For a long title, revise the title or use a precise shorter description.

Within paragraphs, an underline is a dependable visual cue. Color can reinforce it, but a color change alone is easy to miss. Review links against their actual backgrounds, including tinted callouts and illustrated sections. A style that works on white may be difficult to recognize on a bright card.

Separate ordinary link styling from focus styling. The first says “this text is interactive”; the second says “this is the current keyboard position.” Preserve the browser's focus indicator unless your replacement provides a clearly visible one.

.article a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

This example is a starting point for a design review, not a complete contrast evaluation. Test the outline beside neighboring content, inside clipped containers, and against each background. A visible indicator should stay visible while the element has keyboard focus. Avoid effects that flash briefly and then disappear.

Check layout changes on hover as well. A border that suddenly shifts nearby text can make a small link harder to activate. Reserve space for decorative changes, and keep motion subtle enough that the destination remains the main event.

Dense navigation is especially difficult on small screens. Increase the interactive area with padding and allow enough space between neighboring destinations. Test the actual clickable rectangle, rather than measuring only the visible characters.

WCAG 2.2's minimum target-size criterion uses a 24 by 24 CSS pixel reference, with defined exceptions including inline text and sufficient spacing. That minimum is not an ideal size for every control. A primary navigation item can usually be more comfortable, especially when people are using a phone with one hand.

A row of short category labels deserves particular attention. If their hit areas nearly touch, an accidental selection can feel like a routing error. Let the labels wrap naturally, add breathing room, and confirm that a longer translated label would still fit. Do not shrink text simply to keep every item on one line.

Keep cards and images understandable

Choose one clear primary destination for each article card. A linked title is often enough. Repeating the same destination on the image, title, and a separate action can create a tiring sequence of identical keyboard stops. Before making the whole card interactive, check whether it also contains tags, author links, or other controls.

Keep interactive elements out of other links. A card that contains independent category links should not be wrapped in one large anchor. Design the hierarchy explicitly so visitors can choose the article or its category without triggering an overlapping control.

For an image-only link, provide an accessible name that explains the destination. If the same anchor already includes visible descriptive text, assess whether the image is decorative in that context so its alternative text does not repeat the label unnecessarily. Review the combined announcement rather than judging image text in isolation.

Explain unusual destination behavior

Opening a new tab changes the reader's context. Use it when there is a clear reason, and include a visible indication such as “opens in a new tab.” An unlabeled external-link icon is less helpful when a reader cannot identify the symbol or does not see it.

Keep normal editorial navigation in the current tab unless the task calls for another behavior. People who want a new tab can often choose one through their browser. If you do set target="_blank", an explicit rel="noopener" also makes your intention about the opener relationship clear in the markup.

For downloads, name the format and keep any size claim accurate. A link labeled “Get the checklist” should not unexpectedly open a large presentation. If a file changes, update the label and surrounding description during the same publishing step.

Help people bypass repeated navigation

A skip link gives keyboard users a direct route to the main content. It is especially useful when the same long header appears on every page. Place it early in the document and make it visible when focused.

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

Test the real destination after adding this pattern. A sticky header, an unexpected focus order, or duplicate IDs can undermine the intended shortcut. The guide to paths and fragments explains why a section destination should remain stable as the page evolves.

Review a complete reading journey

Choose a representative page containing navigation, prose links, cards, and a footer. Then work through the page with a repeatable review:

  • Use Tab and Shift+Tab to reach each link, and confirm that the current position stays visible.
  • Activate representative links with Enter and check the resulting destination.
  • Read the link labels as a standalone list and identify any ambiguous repetitions.
  • Increase browser zoom and check that navigation wraps without hiding destinations.
  • Try a narrow screen and verify the spacing between neighboring targets.
  • Use a screen reader where available to assess names, repeated links, and the skip route.

Automated checks can identify some missing names or markup problems, but the label's usefulness still needs editorial judgment. Ask whether an unfamiliar reader could predict the result. Record failures as specific tasks, such as “replace repeated card labels with article titles,” so the next revision has a clear target.

Build consistent patterns across the site

Good links become easier to maintain when the same decisions appear throughout a site. Establish a descriptive naming style, visible focus treatment, spacious navigation, and a clear policy for new tabs and downloads. Apply those patterns to link-in-bio pages as well as articles. A short page still needs destinations people can recognize, reach, and trust.