Boutons vs liens : quand utiliser chaque élément HTML

La distinction entre boutons et liens peut sembler subtile, mais elle a des implications majeures pour l'accessibilité et l'expérience utilisateur. Choisir le bon élément HTML garantit une interface prévisible et utilisable par tous. Voici comment faire le bon choix.

La règle fondamentale

La distinction est simple en théorie :

• Lien (<a href>) : Emmène l'utilisateur quelque part (navigation)
• Bouton (<button>) : Fait quelque chose sur place (action)

[!NOTE] Si cliquer sur l'élément change l'URL du navigateur, c'est un lien. Sinon, c'est un bouton.

Pourquoi c'est important pour l'accessibilité

Annonces des lecteurs d'écran

Les technologies d'assistance annoncent le type d'élément, permettant aux utilisateurs d'anticiper son comportement :

• "Lien, Accueil" → L'utilisateur s'attend à changer de page
• "Bouton, Envoyer" → L'utilisateur s'attend à une action sur la page

Si vous utilisez un bouton pour naviguer, l'utilisateur sera désorienté quand la page changera.

Liste des liens

Les lecteurs d'écran permettent d'afficher la liste de tous les liens d'une page pour une navigation rapide. Un "lien" codé comme bouton n'apparaîtra pas dans cette liste.

Comportement clavier différent

Les utilisateurs clavier connaissent ces conventions. Les violer crée de la confusion.

Quand utiliser un lien

Utilisez <a href=""> pour :

Navigation vers une autre page

<a href="/contact">Contactez-nous</a>
<a href="https://exemple.com">Site externe</a>

Navigation vers une section de la page

<a href="#section-tarifs">Voir les tarifs</a>

Téléchargement de fichier

<a href="/docs/rapport.pdf" download>Télécharger le rapport (PDF)</a>

Lien email ou téléphone

<a href="mailto:contact@exemple.fr">contact@exemple.fr</a>
<a href="tel:+33123456789">01 23 45 67 89</a>

Quand utiliser un bouton

Utilisez <button> pour :

Soumettre un formulaire

<form>
  <button type="submit">Envoyer</button>
</form>

Déclencher une action JavaScript

<button onclick="ouvrirModale()">Ouvrir les filtres</button>
<button onclick="ajouterAuPanier()">Ajouter au panier</button>

Ouvrir/fermer un élément

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>

Contrôler un média

<button onclick="video.play()">Lecture</button>
<button onclick="video.pause()">Pause</button>

[!TIP] Utilisez notre outil Bouton vs Lien pour vous aider à déterminer quel élément utiliser dans votre situation.

Les zones grises

Certaines situations prêtent à confusion. Voici comment les gérer.

Pagination

La pagination navigue vers différentes pages ou états :

<!-- Liens : chaque page a une URL distincte -->
<nav aria-label="Pagination">
  <a href="/produits?page=1">1</a>
  <a href="/produits?page=2" aria-current="page">2</a>
  <a href="/produits?page=3">3</a>
</nav>

<!-- Boutons : pagination JavaScript sans changement d'URL -->
<nav aria-label="Pagination">
  <button onclick="allerPage(1)">1</button>
  <button onclick="allerPage(2)" aria-current="page">2</button>
  <button onclick="allerPage(3)">3</button>
</nav>

Onglets

Les onglets changent le contenu visible mais pas l'URL :

<!-- Boutons, pas des liens -->
<div role="tablist">
  <button role="tab" aria-selected="true">Description</button>
  <button role="tab" aria-selected="false">Caractéristiques</button>
</div>

"Voir plus" / "Charger plus"

Si charger plus de contenu sans changer l'URL :

<button onclick="chargerPlus()">Voir plus de produits</button>

Si cela mène à une page dédiée :

<a href="/produits/tous">Voir tous les produits</a>

Bouton de partage

Ouvre une popup ou une modale (ne navigue pas) :

<button onclick="ouvrirPartage()">Partager</button>

Les erreurs courantes

Le div cliquable

<!-- À éviter absolument -->
<div onclick="navigate('/page')">Cliquez ici</div>

Problèmes :

• Non focusable au clavier
• Non annoncé comme élément interactif
• Ne réagit pas à Entrée ou Espace

Le lien sans href

<!-- Non accessible -->
<a onclick="action()">Cliquez</a>

<!-- Ou avec href="#" ou "javascript:void(0)" -->
<a href="#" onclick="action(); return false;">Cliquez</a>

Si c'est une action, utilisez un bouton. Si le href est nécessaire pour le style, c'est un signal que le design doit changer.

Le bouton pour naviguer

<!-- Incorrect -->
<button onclick="window.location='/contact'">Contact</button>

<!-- Correct -->
<a href="/contact">Contact</a>

Le lien style en bouton

Styler un lien comme un bouton est acceptable :

<a href="/inscription" class="btn btn-primary">S'inscrire</a>

Mais attention : même style "bouton", ça reste un lien sémantiquement. Le comportement clavier sera celui d'un lien (Entrée seulement, pas Espace).

Si vous devez utiliser un div (dernier recours)

Parfois, des contraintes techniques imposent l'usage d'un div. Dans ce cas, reproduisez le comportement natif :

<div
  role="button"
  tabindex="0"
  onclick="action()"
  onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();action()}"
>
  Action
</div>

Ou pour un lien :

<div
  role="link"
  tabindex="0"
  onclick="navigate('/page')"
  onkeydown="if(event.key==='Enter')navigate('/page')"
>
  Naviguer
</div>

[!NOTE] Cette approche est toujours inférieure aux éléments natifs. Les éléments natifs ont des comportements supplémentaires (clic droit, ouverture dans nouvel onglet pour les liens) difficiles à reproduire.

Accessibilité des boutons natifs

L'élément <button> offre de nombreux avantages gratuits :

• Focusable par défaut
• Activation clavier (Entrée + Espace)
• Annonce "bouton" par les lecteurs d'écran
• Gestion du focus visible native
• Désactivable avec disabled

<button type="button" disabled>Indisponible</button>

Type de bouton

Précisez toujours le type pour éviter les soumissions accidentelles de formulaire :

<!-- Dans un formulaire -->
<button type="button">Annuler</button>  <!-- N'envoie pas le form -->
<button type="submit">Envoyer</button>  <!-- Envoie le form -->
<button type="reset">Effacer</button>   <!-- Reset le form -->

<!-- Hors formulaire, type="button" est recommandé -->
<button type="button">Action</button>

Accessibilité des liens natifs

L'élément <a href=""> offre également des avantages :

• Focusable quand href est présent
• Clic droit → ouvrir dans nouvel onglet
• Copier l'adresse du lien
• Historique et bouton retour du navigateur
• Indexation par les moteurs de recherche

Liens vers nouvelle fenêtre

Prévenez l'utilisateur si le lien ouvre une nouvelle fenêtre :

<a href="https://externe.com" target="_blank" rel="noopener">
  Site externe
  <span class="sr-only">(nouvelle fenêtre)</span>
</a>

Ou via aria-label :

<a
  href="https://externe.com"
  target="_blank"
  rel="noopener"
  aria-label="Site externe (ouvre une nouvelle fenêtre)"
>
  Site externe
</a>

Récapitulatif

Test et validation

Pour vérifier vos choix :

1. Question URL : L'URL change-t-elle ? Lien. Sinon ? Bouton.
2. Lecteur d'écran : L'annonce correspond-elle à l'attente ?
3. Clavier : Le comportement est-il cohérent ?
4. Clic droit : "Ouvrir dans nouvel onglet" fait-il sens ?

Lancez un audit RGAA pour identifier les problèmes sémantiques sur votre site.

Conclusion

Choisir entre bouton et lien n'est pas une question de style, mais de sémantique et de comportement. En utilisant le bon élément, vous créez des interfaces prévisibles qui fonctionnent pour tous les utilisateurs, qu'ils naviguent à la souris, au clavier, ou avec un lecteur d'écran.

La règle est simple : les liens naviguent, les boutons agissent. En cas de doute, posez-vous la question : "Est-ce que je vais quelque part ou est-ce que je fais quelque chose ?"