Conception de boutons : UI cliquable et accessible

Une bonne conception de boutons consiste à rendre fiable l'élément le plus sollicité d'une interface. Un bouton n'est pas qu'un rectangle coloré ; c'est un contrôle qui paraît cliquable, qui signale clairement son état et qui fonctionne aussi au clavier. Dans cet article, nous construisons un bouton solide autour du triangle état, taille et contraste, et nous aboutissons à un cadre applicable aussi bien dans Figma que dans du vrai CSS.

Pourquoi le bouton est un composant difficile

Parce qu'il paraît petit, le bouton est souvent traité en dernier — alors que c'est l'élément avec lequel l'utilisateur interagit le plus. Face à un bouton, il veut répondre à trois questions en quelques secondes : Est-il cliquable ? Dans quel état est-il maintenant ? Que va-t-il faire ? Si ces réponses ne sont pas claires, l'utilisateur hésite, se trompe de clic, ou ne clique pas du tout. La conception de boutons n'est donc pas une décoration, mais une affaire de communication.

Un bon bouton possède ces qualités fondamentales :

• Affordance : il se détache de son environnement et paraît « pressable » grâce au remplissage, à l'ombre ou à la bordure.
• Retour d'état : il change d'aspect au survol, à la pression, au focus et lorsqu'il est désactivé.
• Hiérarchie : l'action principale ressort nettement des actions secondaires et tertiaires.
• Accessibilité : le contraste est suffisant et il fonctionne au clavier et avec les lecteurs d'écran.

Les états : la moitié cachée d'un bouton

Un bouton statique ne représente que la moitié du travail. Le vrai enjeu est son comportement entre ses états. En pratique, les états à concevoir sont :

• Default — l'état de repos.
• Hover — pointeur au-dessus (uniquement sur dispositifs à pointeur).
• Active / Pressed — au moment du clic, souvent un léger assombrissement ou un décalage de 1px vers le bas.
• Focus — un anneau visible lors de la navigation au clavier.
• Disabled — fermé à l'interaction, faible contraste.
• Loading — l'action est en cours ; un spinner ou un changement de texte.

Construire ces états dans Figma comme un Composant avec variantes facilite une correspondance directe avec le développement. Côté CSS, chaque état correspond à une pseudo-classe :

.btn {
  --bg: #2563eb;
  background: var(--bg);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font: 600 15px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover  { --bg: #1d4ed8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}
.btn:disabled {
  --bg: #cbd5e1;
  color: #f1f5f9;
  cursor: not-allowed;
}

Remarque : utiliser :focus-visible donne aux utilisateurs clavier un repère de focus clair sans afficher un anneau inutile à ceux qui cliquent à la souris. Ne supprimez jamais complètement l'anneau de focus ; c'est l'erreur d'accessibilité la plus répandue.

Taille, zone de clic et cibles tactiles

Quelle que soit la taille visuelle d'un bouton, ce qui compte vraiment, c'est la taille de sa zone cliquable. Sur mobile surtout, les cibles doivent être assez larges pour être touchées précisément au doigt. Les recommandations largement admises :

• Cible tactile minimale d'environ 44×44 px (Apple) / 48×48 dp (Google Material).
• C'est le remplissage (padding), pas la hauteur du texte, qui définit la vraie zone de clic.
• Laissez au moins 8px entre des boutons voisins pour réduire les erreurs de toucher.

Pour de petits boutons à icône, vous pouvez agrandir la zone de clic avec un padding transparent même si la boîte visible est petite. Pensez aussi la taille comme un système : trois paliers comme sm, md, lg suffisent à la plupart des produits, en faisant évoluer ensemble padding et font-size.

Contraste et hiérarchie

Quand plusieurs boutons partagent un écran, l'utilisateur doit comprendre instantanément lequel est l'action principale. Cela se construit par la saturation des couleurs et le remplissage :

• Primary — plein, contraste élevé, généralement un seul par écran.
• Secondary — contour (outline) ou remplissage léger, plus discret.
• Tertiary / Ghost — texte seul, le poids le plus faible.

Pour l'accessibilité, visez les ratios de contraste de texte WCAG : au moins 4,5:1 pour le texte normal et 3:1 pour le texte large/gras. Du texte blanc sur un fond bleu est généralement sûr ; mais évitez du texte gris clair sur un fond gris clair. Ne vous fiez pas qu'à la couleur : appuyez l'état désactivé par un indice supplémentaire (comme un changement de curseur) plutôt qu'un simple estompage, car les daltoniens peuvent ne pas distinguer la seule teinte.

Libellé, icône et microcopie

Le texte d'un bouton compte autant que son design. Les bons libellés sont orientés action et annoncent le résultat : « Enregistrer les modifications » est souvent plus clair que « Enregistrer », et « Envoyer le message » plus clair que « Envoyer ». Quelques règles pratiques :

• Commencez par un verbe et restez bref (1 à 3 mots).
• Si vous utilisez une icône, qu'elle renforce le sens du texte sans le contredire.
• Donnez toujours un aria-label à un bouton à icône seule.

<button class="btn" aria-label="Ajouter au panier">
  <svg aria-hidden="true" focusable="false" ...></svg>
</button>

Ici, aria-hidden="true" masque l'icône aux lecteurs d'écran, tandis que aria-label fournit le sens sous forme de texte. Pendant le chargement, passer le bouton en disabled et changer le texte en « Enregistrement… » évite aussi les doubles clics.

Construire un système de boutons

Plutôt que de dessiner les boutons un par un, construisez un système basé sur des tokens. Conservez les valeurs de couleur, de rayon, d'espacement et de typographie dans des variables, et dérivez-en les variantes. Ainsi, lorsque votre marque évolue, vous mettez à jour depuis un seul endroit et chaque bouton reste cohérent. Dans Figma, on le fait avec composants + variantes + variables ; en CSS, avec les custom properties. La cohérence évite à l'utilisateur de réapprendre chaque bouton — ce qui augmente directement la qualité perçue.

Questions fréquentes

Quelle couleur pour le bouton principal ?

La couleur d'accent de votre marque est un point de départ sensé, tant qu'elle offre au moins 4,5:1 de contraste avec son libellé. Gardez un seul bouton principal par écran ; deux « actions principales » compliquent la décision de l'utilisateur.

Puis-je supprimer l'anneau de focus pour le design ?

Non. Supprimer l'anneau de focus rend le bouton inutilisable au clavier et avec les lecteurs d'écran. Pour un rendu plus net, personnalisez la couleur de l'outline et l'outline-offset, mais laissez toujours un repère visible via :focus-visible.

Vaut-il mieux désactiver le bouton ou afficher un message d'erreur ?

Dans la plupart des cas, garder le bouton actif et afficher au clic un message expliquant ce qui manque vaut mieux que de le désactiver silencieusement, car un bouton désactivé ne dit jamais pourquoi il est inactif et l'utilisateur reste bloqué.

Vos boutons donnent-ils encore l'impression qu'on « ne peut pas cliquer » ? Je peux vous aider à retravailler votre interface sur l'état, le contraste et l'accessibilité. Contactez-moi et rendons vos boutons à la fois beaux et fonctionnels.