Accessibility

For designers

Links are among the most common interactive elements, yet they can easily become accessibility barriers if not designed or coded properly. This section summarises the key guidelines to ensure every link is perceivable, operable, and understandable across devices and assistive technologies.

To ensure that links meet accessibility standards across platforms, please follow this implementation checklist. These recommendations align with WCAG 2.1 AA and EN 301 549, supporting keyboard navigation, screen readers, and assistive technology.

Screen reader support

• Use semantic <a> elements for all links.
• Every link must have a descriptive text label that clearly indicates its destination or purpose.
• For icon-only links, include a descriptive aria-label.
• For external links, add aria-label="Opens in a new tab" or similar.
• Avoid using duplicate or generic labels such as “Learn more” multiple times on the same page.

Keyboard navigation

• Links must be focusable via Tab and activable with Enter/Return.
• Maintain a visible focus state at all times.
• Ensure consistent focus order following the visual reading order.

Motion sensitivity and feedback

• Avoid using motion or animated effects that trigger on hover or focus.
• Respect system preferences for reduced motion (prefers-reduced-motion).

ARIA and markup

• Use role="link" only when a semantic <a> element is not available.
• Never use <div> or <span> elements styled as links.
• Ensure external links open safely (e.g. rel="noopener noreferrer" when target="_blank").

Testing and validation

• All links must be verified through automated accessibility tests (e.g. Axe, Lighthouse) before release.

For developers

Link vs button

Links navigate to a new page or resource. Buttons perform an action. Don’t put href="#" on a link to make it act as a button — use <button> instead. Screen readers announce links and buttons differently, and users have different keyboard expectations for each.

Meaningful link text

Avoid generic text like “click here” or “read more”. Link text should describe the destination so it makes sense out of context (e.g. in a screen reader’s links list).

External links

When a link opens a new window or tab (target="_blank"):

• Add rel="noopener" for security.
• Indicate the behaviour to screen readers, for example <span class="sr-only">(opens in new tab)</span>.

Icons

• Mark decorative icons with aria-hidden="true" (already shown in the examples above).
• If the icon is the only content in a link, add aria-label on the <a> element to provide an accessible name.

Minimum touch area

To ensure accessibility and ease of interaction across devices, all interactive elements — including links — must respect a minimum touch target size.

Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility documentation. It ensures that the link can still be reached, but does not guarantee an optimal experience for all users.

Recommended best practice: 44 × 44 px — This follows WCAG 2.5.5 Target Size (Level AA) and EN 301 549 guidance. Provides a more comfortable interaction area for users with motor difficulties, touch devices, or when using a device outdoors. Should be considered the default requirement in our design system.

The minimum target size applies regardless of the visual size of the component. If the visual element is smaller, additional spacing or invisible padding must be added to meet the requirement. Consistency is key: the same rule applies across all sizes (LG, MD, SM).

Touch area Do’s and Don’ts

Guidance on how to use a component.

• Add invisible padding around links when needed to expand the touch target (without altering the visual appearance).
• Ensure links remain usable and clearly tappable in responsive layouts and mobile contexts.

Guidance on what to avoid when using a component.

• Do not rely solely on the visible text size to define the touch area.
• Do not define touch areas smaller than the minimum, even for inline links.
• Avoid placing multiple inline links too close together, as overlapping touch areas may hinder accessibility.

Content / Copy Guidelines

• Keep to 1–3 words when possible.
• Avoid vague phrases like “Click here”.
• Be concise and descriptive (e.g. “Learn more”, “View details”).
• Keep link text under 24–30 characters for consistency across translations.
• Use plain English and neutral phrasing to make localisation easier.
• Text should wrap naturally rather than truncate, to preserve meaning and accessibility. Character limits (24–30 in English) are guidance, not strict enforcement.