Comparaison comportementale
Bouton icône vs Lien
Différence décisive
Le Bouton icône exécute une action et porte son nom dans un libellé accessible ; le Lien navigue vers une destination et exige un vrai href.
Critères de choix, liens et sources
- Bouton icôneChoisis Bouton icône si l’activation agit sur place, comme copier, fermer ou ajouter aux favoris.Ouvrir la fiche Bouton icône
- LienChoisis Lien si l’activation mène vers une autre page ou route, même quand seule une icône est visible.Ouvrir la fiche Lien
Voir les neuf dimensionsVoir les sources
Déclencher ou naviguer
Essayer
Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?
Bouton icône
Contexte commun aux essais
Bouton icône
Mission
Bouton icône - Icon button
Atteindre Copier avec Tab, entendre son nom, activer avec Espace puis révéler son infobulle complémentaire.
pnpm test
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- La cible complète du bouton possède un focus visible, une icône décorative et le nom accessible indépendant Copier le code.
- Cas limite
- Si l'icône ne charge pas, le nom accessible et la cible restent intacts et l'action reste compréhensible pour la technologie d'assistance.
Lien
Mission
Lien de navigation - Link
Ouvrir Facturation avec Entrée, revenir, puis utiliser le menu contextuel sur le lien d'état externe.
Le service inclut trois espaces partagés.
FacturationDétails de facturation
Cette section est une destination de navigation réelle.
Retour au résuméÉtape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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.
Ce que cet essai montre
Icon button exécute une action comme Button mais sans texte visible ; Link exige toujours une vraie destination de navigation.
Lequel convient à ton besoin ?
Bouton icône
Une action familière se répète dans une barre dense
Lien
Atteindre une autre page ou route
Différence et sources
Icon button exécute une action comme Button mais sans texte visible ; Link exige toujours une vraie destination de navigation.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Contrôle
L'élément interactif qui reçoit la saisie et expose son état.
Décision
Question de famille
Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?
Trois critères pour choisir
- Interactivité
Bouton icône
Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.
Lien
Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
- Déclenchement
Bouton icône
Clic, toucher, Entrée ou Espace sur le contrôle iconographique.
Lien
Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
- Rôle accessible
Bouton icône
button
Lien
a[href]
Neuf dimensions
- Déclenchement
Bouton icône
Clic, toucher, Entrée ou Espace sur le contrôle iconographique.
Lien
Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
- Modalité
Bouton icône
Contrôle d’action non modal ; son apparence compacte ne change pas le comportement d’un bouton.
Lien
Navigation, pas action modale ; change de destination ou ouvre une ressource.
- Positionnement
Bouton icône
Dans une barre d’outils ou près de l’objet concerné par son action unique.
Lien
Dans le contenu ou une région de navigation où la destination a du sens.
- Interactivité
Bouton icône
Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.
Lien
Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
- Focus
Bouton icône
Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.
Lien
Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
- Fermeture
Bouton icône
Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.
Lien
Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
- Rôle accessible
Bouton icône
button
Lien
a[href]
- Cas d’usage
Bouton icône
Une action familière se répète dans une barre dense
Lien
Atteindre une autre page ou route
- Comportement mobile
Bouton icône
Garder une grande cible tactile visible ou invisible et ne jamais dépendre du survol pour expliquer l’action.
Lien
Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.
| 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. |