Accessible Links

Understanding Accessible Links

Accessible links clearly communicate where they lead and remain easy to recognize and use with a mouse, keyboard, touchscreen, or assistive technology.

The HTML <a> element already provides important link semantics and keyboard behavior when it has a valid href attribute. Accessibility then depends on using meaningful link text, maintaining visible link and focus states, and providing enough context for visitors to understand the destination.

Use the Anchor Element

Use the <a> element with an href attribute when the purpose of an interactive element is to navigate to another page, resource, or location.

<a href="/contact.html">Contact Us</a>

A link created this way provides native link semantics and can normally be reached and activated using the keyboard without adding custom accessibility behavior.

Avoid recreating links with generic elements such as <div> or <span>. They do not provide the built-in semantics and behavior of a native link.

Write Descriptive Link Text

Link text should help visitors understand the purpose or destination of the link. Whenever practical, the text itself should communicate what someone can expect after activating it.

Instead of vague text:

<a href="/gardening-guide.html">Click here</a>

Use text that describes the destination:

<a href="/gardening-guide.html">Read the Gardening Guide</a>

Descriptive link text benefits everyone scanning a page and is especially useful when links are encountered separately from the surrounding paragraph.

Links Out of Context

Some assistive technologies provide ways to navigate directly between links or review a list of links on a page. When this happens, repeated links such as Click Here, More, or Read More may provide little information on their own.

Compare these links:

<a href="/vegetables.html">Read more</a>
<a href="/flowers.html">Read more</a>

With more descriptive wording:

<a href="/vegetables.html">Learn About Vegetable Gardening</a>
<a href="/flowers.html">Learn About Flower Gardening</a>

The second version makes the purpose of each link easier to understand even when the surrounding content is not immediately available.

Links and Buttons

Links and buttons are both interactive controls, but they serve different purposes. A link normally takes the visitor somewhere, while a button normally performs an action on the current page or submits information.

Use a link for navigation:

<a href="/products.html">View Products</a>

Use a button for an action:

<button type="button">Show Details</button>

CSS can make links and buttons look similar, but their underlying HTML should still represent what the control actually does.

Make Links Visually Distinguishable

Links should remain visually distinguishable from surrounding text so visitors can recognize which content is interactive. Underlining is a familiar and effective way to identify links within blocks of text.

Color can also help identify links, but color alone should not be the only visual indication when a link appears within surrounding text. Visitors with limited color perception may otherwise have difficulty distinguishing the link.

a {
  text-decoration: underline;
}

Navigation menus, buttons, and other interface components may use different visual treatments when their purpose is clear from the surrounding design.

Provide Visible Keyboard Focus

Keyboard users need to know which link currently has focus. Browsers provide default focus indicators, and these should not be removed unless they are replaced with another clearly visible focus style.

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

A visible focus indicator makes it possible to follow keyboard navigation through links and other interactive controls. The Keyboard Focus tutorial covers focus styling and behavior in greater detail.

Links That Open New Windows

Opening a link in a new browser tab or window can change the visitor's expected navigation behavior. When a new browsing context is necessary, consider informing visitors so the change is not unexpected.

<a href="https://www.example-web.site" target="_blank">
  Example Website (opens in a new tab)
</a>

Clear link text can communicate this behavior directly. An icon may also be used as a visual indicator, but important information should not depend on an unexplained icon alone.

Links to Downloads

When a link downloads or opens a document rather than displaying another ordinary webpage, useful link text can identify the resource type and other important information such as file size when appropriate.

<a href="/files/gardening-guide.pdf">
  Gardening Guide (PDF, 2 MB)
</a>

This gives visitors useful information before they activate the link, particularly when opening the resource may require another application or use significant data.

Image Links

When an image is the only content inside a link, its alternative text should describe the purpose or destination of the link rather than merely describing the image's appearance.

<a href="/index.html">
  <img src="/img/images/logo.png" alt="Example Garden Center home">
</a>

In this example, the important information is that activating the linked logo takes the visitor to the home page.

If a linked image appears alongside link text that already communicates the same purpose, the image may be decorative and use an empty alt="" to avoid unnecessary repetition.

Accessible Link Example

The following example combines descriptive link text, appropriate link purposes, and useful information about different destinations.

<nav aria-label="Garden resources">
  <ul>
    <li><a href="/vegetables.html">Vegetable Gardening</a></li>
    <li><a href="/flowers.html">Flower Gardening</a></li>
    <li><a href="/tools.html">Garden Tools</a></li>
  </ul>
</nav>

<p>
  Download the
  <a href="/files/gardening-guide.pdf">Gardening Guide (PDF, 2 MB)</a>.
</p>

Try changing the link text in the editor. Each link should still make its purpose understandable without depending entirely on the text surrounding it.

Best Practices

• Use the <a> element with an href attribute for navigation.
• Write descriptive link text that communicates the purpose or destination.
• Avoid relying on vague phrases such as Click Here or Read More when more meaningful wording can be used.
• Use links for navigation and buttons for actions.
• Keep links visually distinguishable from surrounding text.
• Provide a clearly visible keyboard focus indicator.
• Tell visitors when a link has unusual behavior, such as opening a new tab or downloading a file, when that information is useful.
• Give linked images alternative text that communicates the purpose of the link.
• Make sure the clickable area is large enough to activate comfortably with different input methods.

Summary

Accessible links communicate their purpose through meaningful HTML and descriptive text. Native anchor elements provide link semantics and keyboard behavior, while clear visual styling and visible focus indicators help visitors identify and interact with links.

Consider the complete link experience: what the link says, where it goes, how it looks, how it behaves with a keyboard, and whether visitors need additional information before activating it.