Comparaison comportementale

Bouton icône vs Lien

Choisir Bouton icône pour : Une action familière se répète dans une barre dense. Choisir Lien pour : Atteindre une autre page ou route.

Décision

Question de famille

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

Règle pour cette paire

Choisis Bouton icône si Icon button exécute une action comme Button mais sans texte visible ; Link exige toujours une vraie destination de navigation.. Choisis Lien si 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..

Dimension	Bouton icôneIcon button	LienLink
Déclenchement	Clic, toucher, Entrée ou Espace sur le contrôle iconographique.	Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
Modalité	Contrôle d’action non modal ; son apparence compacte ne change pas le comportement d’un bouton.	Navigation, pas action modale ; change de destination ou ouvre une ressource.
Positionnement	Dans une barre d’outils ou près de l’objet concerné par son action unique.	Dans le contenu ou une région de navigation où la destination a du sens.
Interactivité	Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.	Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
Focus	Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.	Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
Fermeture	Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.	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	Une action familière se répète dans une barre dense	Atteindre une autre page ou route
Comportement mobile	Garder une grande cible tactile visible ou invisible et ne jamais dépendre du survol pour expliquer l’action.	Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.

Essayer Bouton icône Essayer Lien

Dimension

Bouton icôneIcon button

LienLink

Déclenchement

Clic, toucher, Entrée ou Espace sur le contrôle iconographique.

Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.

Modalité

Contrôle d’action non modal ; son apparence compacte ne change pas le comportement d’un bouton.

Navigation, pas action modale ; change de destination ou ouvre une ressource.

Positionnement

Dans une barre d’outils ou près de l’objet concerné par son action unique.

Dans le contenu ou une région de navigation où la destination a du sens.

Interactivité

Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.

Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.

Focus

Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.

Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.

Fermeture

Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.

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

Une action familière se répète dans une barre dense

Atteindre une autre page ou route

Comportement mobile

Garder une grande cible tactile visible ou invisible et ne jamais dépendre du survol pour expliquer l’action.

Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.