Link

Lien de navigation textuel — interne ou externe, inline ou nav. Souligné par défaut (WCAG 1.4.1), focus visible, liens externes sécurisés (noopener) et annoncés aux lecteurs d'écran. Textual navigation link — internal or external, inline or nav. Underlined by default (WCAG 1.4.1), visible focus, secure external links (noopener) announced to screen readers.

AperçuPreview

Consulter la See the guideline du composantcomponent guideline pour les détails. for details.

Lien externe : External link: NN/g — Visualizing Links

AccueilHome

ComposantsComponents

Tokens

Règles absoluesAbsolute rules

Souligné en texte courant — jamais distinguable par la couleur seule (WCAG 1.4.1)Underlined in body text — never distinguishable by color alone (WCAG 1.4.1)
Lien externe : rel="noopener noreferrer" + icône + texte masqué « nouvel onglet »External link: rel="noopener noreferrer" + icon + hidden "new tab" text
Texte descriptif, lisible hors contexteDescriptive text, readable out of context
Jamais un lien pour une action — utiliser <agtc-button>Never a link for an action — use <agtc-button>
Jamais « cliquez ici »Never "click here"

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-link-default-text`	`semantic.color.action.primary`	#007a68
`--agtc-component-link-default-text-hover`	`semantic.color.action.primary-hover`	#0d3d38
`--agtc-component-link-default-border-focus`	`semantic.color.border.focus`	#007a68

AccessibilitéAccessibility

Soulignement permanent par défaut (au-delà de la couleur) — WCAG 1.4.1Permanent underline by default (beyond color) — WCAG 1.4.1
:focus-visible tokenisé — WCAG 2.4.7Tokenized :focus-visible — WCAG 2.4.7
Externe : icône + texte masqué (l'icône seule ne suffit pas — WCAG H83)External: icon + hidden text (icon alone is not enough — WCAG H83)
Texte de lien descriptif — WCAG 2.4.4Descriptive link text — WCAG 2.4.4

ImplémentationImplementation

<!-- Inline (souligné par défaut) -->
<agtc-link href="/guidelines/link">guidelineguideline</agtc-link>

<!-- Externe (nouvel onglet, sécurisé, annoncé) -->
<agtc-link href="https://lucide.dev" external>Lucide</agtc-link>

<!-- Nav (soulignement au survol) -->
<agtc-link href="/components" underline="hover">ComposantsComponents</agtc-link>

DOs et DON'TsDOs and DON'Ts

À faireDo

Souligner en texte courant ; hover seulement en navUnderline in body text; hover only in nav
Marquer les liens externes (icône + texte AT)Mark external links (icon + AT text)
Écrire un libellé qui décrit la destinationWrite a label that describes the destination

À éviterDon't

Un lien pour déclencher une action JS — utiliser un boutonA link to trigger a JS action — use a button
target="_blank" sans rel="noopener"target="_blank" without rel="noopener"
« cliquez ici » / « en savoir plus » seul"click here" / "read more" alone

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036/043). Decision: LK1–LK8 all approved.

Pattern	Source	Applied	Justification
Underline in body text (beyond color)	NN/g	✅	`underline="always"` by default (WCAG 1.4.1)
Visible `:focus-visible`	NN/g	✅	Tokenized ring
External link: `rel="noopener noreferrer"` + icon + AT text	WCAG H83	✅	Hidden "(opens in a new tab)"
Auto-detect external + override	Coder's Block	✅	http(s) other origin, `external` forces
Descriptive link text	NN/g	✅	Console warning if generic
Link = navigation, button = action	NN/g	✅	`<a href>` required
Distinct visited state	NN/g	❌	Out of v1 — not very relevant in docs/apps; possible later addition
Hover cue even without permanent underline	NN/g	✅	`hover`/`none` underline on hover