Utilisez un bouton

• Dans une interface web, utiliser un <button> plutôt qu’un <div> est le bon choix en matière d’accessibilité et de fonctionnalité
• Un <div> n’est pas reconnu comme élément interactif par les lecteurs d’écran, et ne réagit ni au focus clavier, ni aux touches Enter et Spacebar
• Même en ajoutant les attributs [role="button"] ou [tabindex="0"], des problèmes d’ordre de focus et de gestion des événements clavier subsistent
• Ajouter plusieurs écouteurs d’événements et des conditions pour corriger ces problèmes introduit une complexité inutile
• Un <button> fournit nativement l’accessibilité, le focus et la gestion des entrées clavier : c’est donc la solution la plus simple et la plus standard

---

Mauvaise approche : fabriquer un bouton avec un <div>

• Chez les utilisateurs de React ou HTMX, on voit souvent des implémentations d’interactions comme l’ouverture d’une modale avec un <div onclick="...">
  • Exemple de code :

    <div onclick="showSignIn()">Open Modal</div>
    

• Problèmes de cette approche
  • Les lecteurs d’écran ne reconnaissent pas cet élément comme interactif
  • Il est impossible d’y déplacer le focus au clavier
  • Seul l’événement click fonctionne, et les touches Enter ou Spacebar ne déclenchent rien

Les limites des tentatives de “correction” de l’accessibilité

• Ajouter l’attribut [role="button"] résout le problème de reconnaissance par les lecteurs d’écran, mais
  les problèmes de focus et de gestion des entrées clavier restent entiers
• On peut ajouter [tabindex="0"] pour rendre l’élément focalisable, mais
  cela peut perturber l’ordre du focus ou provoquer des déplacements inattendus
• Pour gérer les entrées clavier, il faut enregistrer un événement keydown au niveau global (document), puis
  détecter la touche Enter ou ' ' (espace) afin de trouver l’élément focalisé et l’exécuter

  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter' && event.key !== ' ') return;
    const notRealBtn = document.activeElement.closest('[onclick]');
    if (!notRealBtn) return;
    // 실행 코드
  });
  

• En pratique, cela revient à réimplémenter de façon compliquée ce que <button> fournit déjà nativement

Les fonctionnalités natives fournies par <button>

• L’élément <button> prend automatiquement en charge :
  • le rôle implicite ([role="button"])
  • la possibilité d’obtenir le focus automatiquement
  • le déclenchement d’un événement click avec les touches Enter et Spacebar lorsque l’élément a le focus
• Pour reproduire le même comportement avec un <div>, plusieurs attributs et scripts sont nécessaires, alors qu’un
  <button> suffit en une seule ligne :

  <button onclick="showSignIn()">Open Modal</button>
  

Conclusion : la simplicité avant tout

• <button> est la façon la plus simple de respecter les standards d’accessibilité tout en réduisant la quantité de code
• Utiliser des éléments HTML standard sans ajouter inutilement des attributs ou de la gestion d’événements est plus avantageux en termes de maintenabilité et d’efficacité
• Le message est clair : plus on veut rester “paresseux” en tant que développeur, plus il faut choisir le bon élément, afin
  d’éviter une complexité inutile et de tirer parti des fonctionnalités natives du web