Skip to content

Accessibility

A link is a native <a href> that changes context — it follows the WAI-ARIA Link pattern and meets WCAG 2.1 AA. Its accessibility hinges on three things: a descriptive accessible name that makes sense out of context, correct link-vs-button semantics so screen readers announce it as navigation, and a clear, visible focus state — so the destination is understood whether the user reads it, hears it, or tabs to it.

For designers

Section titled “For designers”
  • Link text and every state — rested, hover, focus, and visited — must maintain accessible contrast on every supported surface, including the contrast variant placed over imagery. Source: WCAG 1.4.3 Contrast (Minimum).
  • A link must be distinguishable from the surrounding text by more than colour alone — pair the colour with an underline or another non-colour cue, especially for inline links inside running text. Source: WCAG 1.4.1 Use of Color.
  • Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
  • Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

Build every link as a native <a href> — it carries the link role, keyboard operation (Tab to reach, Enter to activate), and focus for free. Don’t style a <div> or <span> to look like a link, and don’t fake a link with href="#" to run an action: a link navigates, a button acts, and screen readers announce the two differently with different keyboard expectations, so reach for <button> when the job is an in-page action. Reserve role="link" for the rare case where a native <a> genuinely isn’t available.

Link text is the accessible name, so make it describe the destination and stand on its own out of context — in a screen reader’s links list, “click here” and “read more” say nothing. When a link opens a new tab (target="_blank"), pair it with rel="noopener" and announce the new tab in the name. Mark decorative icons aria-hidden="true". Give links a comfortable touch target — a 24×24 px minimum, expanded toward 44×44 px with invisible padding when the visible text is smaller, and never pack inline links so tightly that their targets overlap. Source: WCAG 2.5.8 Target Size (Minimum). Each element’s role, accessible name, and new-tab handling are in the Labelling elements section below.

Labelling elements

Section titled “Labelling elements”

Give every element the role, name, and state assistive technology needs.

Link

A native <a href> takes role="link" implicitly — no ARIA needed. Its accessible name is its text content, so keep that text descriptive and unique on the page: two links with identical text but different destinations announce the same in the links list and leave the user guessing.

Icon

Decorative icons carry no meaning for assistive technology — mark them aria-hidden="true" so the link’s name stays its text. When an icon is the link’s only content it isn’t decorative: give the <a> an aria-label describing the destination, since there’s no text to name it.

External / new-tab link

When a link opens a new tab or leaves the site, announce that in the name — a visually hidden (opens in a new tab) appended to the label, or an aria-label that includes it — so screen-reader users aren’t moved without warning. Pair target="_blank" with rel="noopener".

Source: WCAG 4.1.2 Name, Role, Value.