Comparaison comportementale

Bouton vs Lien

Différence décisive

Le Bouton exécute une action dans la page courante ; le Lien mène vers une destination avec un href et le comportement de navigation du navigateur.

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

Décision

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

Dimension	BoutonButton	LienLink
Déclenchement	Clic, toucher, Entrée ou Espace sur le contrôle nommé.	Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
Modalité	Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.	Navigation, pas action modale ; change de destination ou ouvre une ressource.
Positionnement	Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.	Dans le contenu ou une région de navigation où la destination a du sens.
Interactivité	Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.	Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
Focus	Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.	Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
Fermeture	Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.	Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
Rôle accessible	button	a[href]
Cas d’usage	Envoyer ou réinitialiser un formulaire	Atteindre une autre page ou route
Comportement mobile	Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.	Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.

Bouton vs Lien

Le Bouton exécute une action dans la page courante ; le Lien mène vers une destination avec un href et le comportement de navigation du navigateur.

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

Neuf dimensions

Dimension	BoutonButton	LienLink
Déclenchement	Clic, toucher, Entrée ou Espace sur le contrôle nommé.	Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
Modalité	Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.	Navigation, pas action modale ; change de destination ou ouvre une ressource.
Positionnement	Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.	Dans le contenu ou une région de navigation où la destination a du sens.
Interactivité	Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.	Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
Focus	Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.	Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
Fermeture	Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.	Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
Rôle accessible	button	a[href]
Cas d’usage	Envoyer ou réinitialiser un formulaire	Atteindre une autre page ou route
Comportement mobile	Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.	Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.