Aller au contenu
SkillCodex
Menu

Link

Lien

Une connexion nommée vers une autre destination qui conserve le comportement de navigation standard du navigateur.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : aller à la page de facturationcliquer sur ce texte pour ouvrir un autre articleune destination que je peux ouvrir dans un nouvel onglet

Toutes les formulations
Enregistrer et partager

Reconnaître

Déclencher ou naviguer

Essayer

Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?

Contexte commun aux essais

Un écran de projet permet à l'utilisateur de déclencher une opération ou d'atteindre une destination depuis un contrôle adapté à l'espace disponible.

Lien

Link navigue et possède un href ; Button exécute une action, tandis qu'Icon button reste une action même représentée uniquement par une icône.

Lequel convient à ton besoin ?

Lien

Atteindre une autre page ou route

Bouton

Envoyer ou réinitialiser un formulaire

Quel composant utilises-tu ici ?
Différence et sources

Link navigue et possède un href ; Button exécute une action, tandis qu'Icon button reste une action même représentée uniquement par une icône.

Consulter les sources

Parties du spécimen

Position dans l’atlas

Carte relationnelle

Repère le chapitre, les concepts proches et la prochaine décision utile.

  • Chapitre

    Déclencher ou naviguer

    Lien appartient à ce groupe de concepts comparés.

  • Ne pas confondre

    Bouton

    Choisis Lien si l’activation emmène vers une autre page ou route que l’on peut ouvrir dans un nouvel onglet. Choisis Bouton si l’activation change quelque chose ici, comme envoyer, ouvrir ou supprimer.

    Comparer cette paire
  • Ne pas confondre

    Bouton icône

    Choisis Lien si l’activation mène vers une autre page ou route, même quand seule une icône est visible. Choisis Bouton icône si l’activation agit sur place, comme copier, fermer ou ajouter aux favoris.

    Comparer cette paire
  • Prochaine étape

    Compare les concepts du chapitre avant de retenir une implémentation.

    Ouvrir le chapitre

Avec tes mots

Comprendre

Ce que les gens décrivent

Alias documentés : hyperlien, lien texte, lien de navigation

  • aller à la page de facturation
  • cliquer sur ce texte pour ouvrir un autre article
  • une destination que je peux ouvrir dans un nouvel onglet
  • naviguer vers les réglages du projet
  • un texte avec une vraie adresse Web
  • me ramener au tableau de bord

Choisir

À utiliser quand

  • Atteindre une autre page ou route
  • Ouvrir un téléchargement ou site externe avec un libellé honnête

À éviter quand

  • Exécuter une modification sur place
  • Utiliser un clic sans destination réelle

Comparer

Comparer les concepts proches

Checklist de vérification

Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

  1. 1. À faire

    Atteins le lien avec Tab, lis sa destination, puis active-le avec Entrée.

    Résultat attendu

    Le lien a un nom compréhensible et mène à la destination annoncée.

  2. 2. À faire

    Utilise Ouvrir dans un nouvel onglet du navigateur ou son clic modifié habituel sur le lien.

    Résultat attendu

    Le comportement natif fonctionne car la destination est un vrai lien, y compris pour l’ouvrir séparément.

  3. 3. À faire

    Lis le lien et place le focus dessus parmi les textes et commandes voisins dans une fenêtre étroite.

    Résultat attendu

    Son rôle et son focus restent visibles, sa cible ne chevauche pas une autre commande et toute ouverture inattendue d’une nouvelle fenêtre est expliquée.

Contrat complet
  1. 1Un vrai href pointe vers la destination
  2. 2Le libellé garde son sens hors contexte
  3. 3Le clavier et les opérations du navigateur restent natifs
  4. 4L'état actuel ou externe est exposé seulement si utile

Comprendre → Reconnaître → Choisir → Comparer

Pack pour ton agent

Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

Fiche complète, enregistrement et provenance

Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

Digest du Pack: sha256:82acb27ba56b24dadf5f2006b204be4b423633c4621f9ad5491ee8f2edae5487

Dans le code

TechnologiePrimitiveVersionLimite
Web platform

a[href]

NatifUn lien change de destination et préserve les fonctions du navigateur : nouvel onglet, copie de l’adresse et état visité.

Détails techniques

Comportements

  • Naviguer vers une destination

    L'activation change l'URL ou atteint une destination nommée tout en conservant le comportement standard d'un lien.

  • Suivre avec l’activation native du lien

    Le pointeur, le toucher ou Entrée suit le lien ; Espace conserve son comportement natif de défilement de page.

États

  • Résumé du compte

    Résumé du compte

  • Détails de facturation

    Détails de facturation

Transitions d’état

  • Résumé du compte → Détails de facturation

    Entrée, le pointeur ou le toucher suit le lien d’ancrage Facturation vers la section de détails réelle.

  • Détails de facturation → Résumé du compte

    Le lien d’ancrage Retour au résumé ramène au résumé du compte par une navigation réelle.

Scénarios de test

Contexte
Un résumé de compte renvoie vers sa section Détails de facturation et une page externe d’état du service.
Mission
Ouvrir Facturation avec Entrée, revenir, puis utiliser le menu contextuel sur le lien d'état externe.
État principal
Chaque lien descriptif possède une vraie destination et un focus distinct du texte voisin.
Cas limite
La destination externe est identifiée dans le texte accessible lorsque son ouverture ou son contexte pourrait surprendre.

Signaux visuels

  • Libellé textuel descriptif
  • Soulignement ou style de lien cohérent
  • État visité ou actuel lorsque pertinent

Signaux comportementaux

  • L'activation change de destination
  • Le menu contextuel expose les opérations de lien
  • Le clic modifié ouvre un onglet selon le navigateur

Accessibilité

Rôle
a[href]
Nom accessible
Le contrôle principal ou la région nommée pour Lien possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
Focus clavier
Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
Fermeture
Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
Défilement
La navigation vers une route ou un fragment fait défiler vers une destination pertinente de façon prévisible, et le focus est géré lorsque le contexte change.
Annonce
Le texte nomme la destination, et les états actuel, externe, téléchargement ou changement de langue sont exposés si pertinents.
Clavier
  • Tab focalise le lien
  • Entrée suit la destination
  • Les touches modificatrices conservent l'ouverture native d'un onglet

Implémentations

Ouvrir la matrice HTML, ARIA, Radix et shadcn
  • a[href]

    implementationKind
    native
    nativeElement
    a[href]
    ariaPattern
    link
    radixPrimitive
    Non applicable
    shadcnRecipe
    Non applicable
    runtimeDependency
    Non applicable
    packageName
    Non applicable
    exportName
    Non applicable
    exactVersion
    Non applicable
    status
    verified
    sourceId
    source-ui-html-link
    deprecationStatus
    active
    replacement
    Non applicable
    validFrom
    Non applicable
    validUntil
    Non applicable

    Limite d’équivalence : Un lien change de destination et préserve les fonctions du navigateur : nouvel onglet, copie de l’adresse et état visité.

    Vérifier la source du binding

Sources

  • WHATWG HTML: The a element
    sourceId
    source-ui-html-link
    kind
    standard
    canonicalUrl
    https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
    publisher
    WHATWG
    sourceRevision
    http-last-modified:2026-07-19T13:52:46Z
    consultedAt
    2026-07-19
    license
    Non indiquée
    contentDigest
    sha256:fe0a3d4315ccdf4f171cbb0c61ee6188b0db2dfe13a7c7f1f04f6b37528661f6
    status
    verified

    Affirmation couverte : Lien : sémantique native normative, états, attributs et comportement du navigateur pour a[href].

  • WCAG 2.2: Focus Appearance
    sourceId
    source-ui-wcag-understanding-focus-appearance
    kind
    documentation
    canonicalUrl
    https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
    publisher
    W3C WAI
    sourceRevision
    http-last-modified:2026-07-02T10:07:49Z
    consultedAt
    2026-07-19
    license
    Non indiquée
    contentDigest
    sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
    status
    verified

    Affirmation couverte : Lien : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

  • WAI-ARIA 1.2: Roles Model
    sourceId
    source-ui-wai-aria-roles
    kind
    standard
    canonicalUrl
    https://www.w3.org/TR/wai-aria-1.2/#roles
    publisher
    W3C WAI
    sourceRevision
    W3C-REC-wai-aria-1.2-20230606
    consultedAt
    2026-07-19
    license
    Non indiquée
    contentDigest
    sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
    status
    verified

    Affirmation couverte : Lien : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

  • WHATWG HTML: The button element
    sourceId
    source-ui-html-button
    kind
    standard
    canonicalUrl
    https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
    publisher
    WHATWG
    sourceRevision
    http-last-modified:2026-07-19T13:52:46Z
    consultedAt
    2026-07-19
    license
    Non indiquée
    contentDigest
    sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
    status
    verified

    Affirmation couverte : Lien : sémantique native normative, états, attributs et comportement du navigateur pour button.

  • WAI-ARIA APG: Button Pattern
    sourceId
    source-ui-aria-button
    kind
    documentation
    canonicalUrl
    https://www.w3.org/WAI/ARIA/apg/patterns/button/
    publisher
    W3C WAI
    sourceRevision
    http-last-modified:2026-07-09T07:07:36Z
    consultedAt
    2026-07-19
    license
    Non indiquée
    contentDigest
    sha256:863329ea659a53439b0953eec0bd0af7c6219e372d0e878f75e57d263924704c
    status
    verified

    Affirmation couverte : Lien : guide APG informatif pour le modèle bouton : rôles, états, relations et interactions au clavier.