Link (custom)

Custom-built link that mimics native <a> behaviour.

Pattern

When the native <a href> can't be used (e.g., a div that needs to behave as a link), the link role gives custom-built navigation elements a screen-reader-recognised affordance. Real <a> is preferred where possible.

Roles

link

States and properties

tabindex: 0 to make it focusable.

Keyboard interaction

Enter: Activate.

WCAG criteria

2.1.1 — Keyboard
4.1.2 — Name, Role, Value

Canonical reference

WAI-ARIA Authoring Practices Guide — Link (custom)

All patterns
WidgetPatternAnalyzer — the analyser that validates these patterns.
Back to Paradise