Link

A link navigates the user to another page, section, or resource, and should always have descriptive text that makes sense out of context.

Demo

Tab through the link examples below and observe how each one is announced by assistive technology. Notice the visible focus styling, the link text that describes the destination, and how links that open in a new tab communicate that behavior. Compare links to buttons — both are interactive, but links represent destinations while buttons trigger actions.

Understanding modern design systems

Jump to key principles

A well-structured design system brings consistency and efficiency to product development. By establishing shared patterns for typography, spacing, colour, and interaction, teams can move faster while maintaining a cohesive experience across every touchpoint.

Components are the building blocks of any interface. Each one serves a specific purpose — whether it is capturing user input, presenting information, or guiding navigation. When components follow predictable conventions, they become easier to learn, reuse, and maintain over time.

Why standards matter

Without clear guidelines, small inconsistencies accumulate quickly. Buttons vary in size, labels drift out of alignment, and spacing between sections becomes unpredictable. These details may seem minor on their own, but together they create friction for users and slow down the teams building the product.

Establishing a shared vocabulary — from naming conventions to accessibility requirements — helps bridge the gap between design and engineering. It reduces ambiguity during handoff, minimizes rework, and ensures that the final implementation matches the original intent.

Visit Accenture to learn more about building scalable digital experiences.

Key principles

Effective design systems are built on a few core ideas: modularity, so that components can be combined in flexible ways; clarity, so that every element communicates its purpose at a glance; and accessibility, so that the experience works for everyone regardless of ability or device.

When these principles guide every decision — from colour contrast ratios to keyboard navigation patterns — the result is an interface that feels intuitive, reliable, and easy to extend as requirements evolve.

What to Observe

Each link receives a clear visible focus indicator when navigated to with the keyboard.
Link text is descriptive enough to convey the destination without relying on surrounding context (no "click here" or "read more").
Links that open in a new tab or window communicate that behavior in their accessible name or through visible supplemental text.
Links are visually distinguishable from surrounding body text through more than color alone — for example, by underline or other visual treatment.
Icon-only links include an accessible name via aria-label or visually hidden text so their purpose is not lost to screen reader users.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Anchor element — The native <a> element with an href attribute that defines the destination; provides keyboard operability and the "link" role by default.
Link text — The visible label inside the anchor that describes where the link leads; forms the accessible name when no other override is present.
Icon (optional) — A decorative or informational icon accompanying the link text; must be hidden from assistive technology if the text alone is sufficient.
New-tab indicator (optional) — Visible or visually hidden text (for example, "opens in a new tab") appended when the link opens in a new context.
External indicator (optional) — A visual signal, such as an external link icon, indicating the link leads to a different domain.

Accessibility Behavior

Links must use a native <a href> element so they are keyboard-focusable, activatable with Enter, and announced with the correct role.
Link text must describe the destination clearly enough to be understood without reading surrounding content.
Links that open a new browser tab or window must inform users of that behavior, either in the visible text or in an accessible name supplement.
Links must be distinguishable from non-link text using a visual cue beyond color alone, such as an underline.
The link's focus state must meet minimum contrast requirements and be clearly visible against the page background.
Links must not be used to trigger actions — that is the role of a button; using a link without a meaningful href creates confusion for both keyboard and screen reader users.

Common Mistakes

Using vague link text such as "click here," "read more," or "learn more" that provides no meaning when read out of context by a screen reader.
Opening links in a new tab without warning users, which can disorient people using screen readers or those who rely on the browser's back button.
Distinguishing links from body text only by color, which fails users who cannot perceive color differences.
Using <a> elements without an href attribute to trigger JavaScript actions, producing elements that behave like buttons but are not keyboard-accessible by default.
Using icon-only links without an accessible name, making the link's destination completely unknown to screen reader users.

Why This Matters

Links are the most fundamental navigation mechanism on the web — they are how users move between pages, jump to sections, and access resources. Screen reader users frequently navigate by pulling up a list of all links on a page, which means a page full of "click here" or "read more" links becomes a list of identical, meaningless entries. Users who cannot distinguish links from body text visually may activate them accidentally or miss them entirely. Getting link semantics and text right is one of the highest-return accessibility investments because it affects every page of a product, every time a user navigates.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.