Link

Links are text-based interactive elements used to navigate users to external sites outside the app. They can be used inline or as standalone text.

WCAG Score - TBD


Provided by the component

Visual distinction from surrounding text.

Links are visually distinguishable from surrounding text without relying solely on color and by using underlining.

This visual distinction must be consistent across all variants and backgrounds.

Color contrast

Links meets contrast requirements against its background with a minimum contrast ratio: 4.5:1 for normal text.

Focus visibility

When a link receives focus through assistive technologies or alternative input methods, it is visually indicated with a focus ring. This way, it does not rely solely on color. These focus styles should not be removed.

Touch target size

For standalone links, the interactive area should meet minimum target size requirements to support users with limited motor precision.

  • Recommended minimum target size: 44 px
  • The interactive area may extend beyond the visible text

When a Link is used inline within a block of text, target size requirements do not apply. According to WCAG 2.2, both 2.5.8 (AA) and 2.5.5 (AAA) allow exceptions for inline targets where increasing the target size would:

  • Disrupt the flow of text
  • Change the layout of surrounding content

In these cases:

  • The link remains accessible as part of readable text
  • Alternative mechanisms (zoom, text resizing, assistive technologies) support interaction

This makes inline links acceptable even when they do not meet minimum target size dimensions.


Implementation considerations

Developers must do the following in the implementation to be considered fully accessible:

No disabled state

Links do not support a disabled state.

  • If a destination is not available, the link should not be rendered
  • Disabled-looking links can create ambiguity and accessibility issues
  • Removing unavailable links ensures consistent meaning and behavior

Role and semantics

Links must be programmatically exposed as links so assistive technologies can correctly identify them.

  • Screen readers announce the element as a link
  • The accessible name matches the visible label
  • Link semantics must not be replaced with button semantics