Utilisez un bouton

• Dans une interface web, utiliser un plutôt qu’un est le bon choix en matière d’accessibilité et de fonctionnalité
• Un `` 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 `` 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 ``

• Chez les utilisateurs de React ou HTMX, on voit souvent des implémentations d’interactions comme l’ouverture d’une modale avec un ``
  • Exemple de code :

    Open Modal
    
    

• 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 `` fournit déjà nativement

Les fonctionnalités natives fournies par ``

• L’élément `` 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 , **plusieurs attributs et scripts sont nécessaires**, alors qu’un suffit en une seule ligne :

  Open Modal
  

Conclusion : la simplicité avant tout

• `` 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

[come2mecome]

C’est un très bon article. L’idée principale du texte peut se résumer ainsi : « utilisons les balises HTML de manière pertinente ». Si l’on fournit un événement de clic avec une balise div (ou une autre), je pense que cela ne diffère en rien de l’époque où l’on construisait les mises en page avec des balises table.

[carnoxen]

Bien sûr, ajouter des attributs aria-* peut rendre les choses plus explicites, mais tant qu’à se donner tout ce mal, autant utiliser directement la balise appropriée lol

[roxie]

Que de souvenirs, haha

[nemorize]

Utilisez des boutons

background, border, outline, appearance, -webkit-appearance, cursor
Il y a beaucoup trop de styles par défaut à écraser, snif snif

[rtyu1120]

C’est pour ça qu’il existe un reset CSS.

[carnoxen]

Les sites des administrations de notre pays utilisent beaucoup ``, on dirait...

[GN⁺]

Avis Hacker News

• L’un de mes griefs, c’est quand des sites web implémentent la navigation avec des handlers onclick Il suffit d’utiliser une balise `` et tout fonctionne automatiquement comme il faut : ouverture dans un nouvel onglet, intégration avec les dispositifs d’accessibilité, menu du clic droit, etc. Si c’est de la navigation, il faut utiliser des liens plutôt qu’une soupe JavaScript

  • Ces dernières années, ce genre d’implémentation s’est multiplié C’est probablement l’effet des frameworks ou simplement de la négligence Malgré tout, la méthode traditionnelle est presque toujours meilleure du point de vue de l’UX J’espère qu’il y aura un peu de friction pour ceux qui essaient de remplacer la balise ``
  • Je pense que le problème vient des développeurs qui ont commencé directement avec React, sans apprendre les concepts HTML de base, et qui sont passés tout de suite aux trucs “amusants” Ces gens créent de mauvais patterns, puis les développeurs suivants les reproduisent tels quels J’ai très rarement eu besoin de styliser un `` pour qu’il ressemble à un bouton
  • Il faut aussi se débarrasser du défilement basé sur JS J’utilise souvent le bouton du milieu de la souris pour faire défiler, et beaucoup de sites cassent ça
  • Ça me fait penser au vérificateur de liens de Microsoft Office 365 Avec un clic gauche, on tombe sur une page de vérification de sécurité, mais avec un clic du milieu, on va directement à la destination
  • Même dans un projet React récent auquel j’ai participé, toute la navigation passait par onClick Même les éléments qui étaient en pratique des liens étaient tous gérés via des handlers de clic, et ça me dépasse

• La plupart des boutons devraient explicitement avoir type="button" La valeur par défaut est submit, donc s’ils sont dans un formulaire ils le soumettent automatiquement Je pense que certains développeurs utilisent des `` parce qu’ils ne le savent pas

  • Je trouve que cette information essentielle manquait dans le long billet de l’OP Les boutons avec le type par défaut ont des comportements bizarres et peuvent même court-circuiter les handlers JS
  • La valeur par défaut correspond à , et est différent
  • Moi aussi, je l’ai appris à mes dépens
  • Utiliser un permet d’éviter le problème de `type="submit"` Un est vide dès le départ, donc on n’ajoute que les fonctionnalités nécessaires, et c’est plus facile à modifier ensuite À l’inverse, avec ``, il faut consulter la documentation pour comprendre le comportement par défaut Au final, c’est une question de contrôle explicite vs fonctionnalités intégrées

• J’aurais aimé que l’article élargisse le propos vers l’idée d’utiliser simplement les éléments HTML conçus pour cet usage Beaucoup de développeurs SPA ne comprennent pas bien la sémantique des éléments HTML, donc ils réinventent la roue à chaque fois

  • Ce serait bien que les éléments soient un peu plus faciles à styliser Par exemple, le date picker par défaut est tellement laid qu’on finit par le remplacer par une version en JS
  • L’idée de « utiliser la plateforme telle quelle » revient souvent dans le front-end depuis HTML5, mais elle n’a pas encore vraiment pénétré partout
  • En pratique, la plupart des développeurs connaissent à peine les éléments HTML et essaient de tout faire avec un seul DIV
  • Vers 2010, les navigateurs avaient chacun leur propre style de bouton, donc il fallait les refaire soi-même C’est le contexte dans lequel les boutons personnalisés sont apparus

• Aujourd’hui, il y a toute une génération qui clique partout à l’écran pour trouver les zones interactives Il y a 10 ans, quelqu’un a fait en sorte que le glisser de lien passe avant la sélection de texte, et maintenant il est presque impossible de sélectionner du texte Il faudrait peut-être forker le navigateur pour corriger ça

  • J’ai l’habitude de faire glisser les liens pour les ouvrir dans un onglet en arrière-plan En maintenant Alt (ou Option), on peut sélectionner le texte à l’intérieur d’un lien
  • Sur iOS, c’est le même genre d’agacement quand on essaie de copier un numéro de téléphone et que ça lance automatiquement un appel C’est vraiment un comportement dont on ne veut pas
  • Le texte impossible à sélectionner me rend fou Sur macOS, l’app TextSniper permet de sélectionner une zone et de copier le texte via OCR Grâce à ça, même Google Analytics devient un peu plus utilisable
  • Moi aussi, j’essaie souvent de sélectionner une partie du texte dans un lien et j’échoue Ce problème devrait être évoqué plus souvent
  • Il existe aussi une extension de navigateur pour sélectionner le texte des liens Avant, elle s’appelait Select Like A Boss, maintenant c’est Drag-Select Link Text

• La feuille de style par défaut de Chrome contient button {align-items: flex-start}, ce qui m’a fait perdre beaucoup de temps à cause d’un bug de taille flexbox Malgré ça, j’essaie autant que possible d’utiliser les bons éléments HTML, mais sur de petits side projects il arrive que `` soit plus pratique

  • La propriété appearance: none est utile pour réinitialiser le style des boutons J’ai créé une classe .unbuttonify pour obtenir un comportement de bouton avec une autre apparence
  • Je veux aussi souligner qu’un développeur front-end devrait maîtriser les bases du CSS

• Il faut utiliser les éléments conformément à leur intention d’origine autant que possible

• J’ai deux reproches à faire aux boutons L’un, c’est qu’il faut de toute façon restyliser leur apparence, l’autre, c’est l’avertissement disant qu’on ne peut pas imbriquer des boutons En pratique, on tombe dessus assez souvent

• Les LLM génèrent souvent ce genre de mauvais patterns Ils ignorent fréquemment les fonctionnalités natives du navigateur et implémentent des choses de façon inutilement complexe Je demande souvent à Claude de simplifier ce genre de code Ils ont aussi tendance à rendre étrange la gestion des erreurs en TypeScript

  • Les LLM sont excellents pour écrire du code, mais ils manquent de sens de l’ingénierie logicielle
  • À cause de leur nature de prédiction de tokens, les LLM choisissent plus souvent des patterns complexes

• Moi, j’essaie d’utiliser des boutons par défaut autant que possible En revanche, quand quelque chose doit réellement se comporter comme un lien, j’utilise une balise ``

  • Si l’URL change, c’est un lien ; sinon, c’est un bouton
  • Si c’est un « hyperlien qui navigue à l’intérieur d’une web app », alors c’est une balise ``

• Je me demandais pourquoi certains voulaient utiliser ``

  • C’est probablement parce qu’un `` se prête mieux à des personnalisations visuelles bizarres Résultat, ça finit par ne plus ressembler ni se comporter comme un bouton
  • Par exemple, des sites comme TV Tropes repliaient et dépliaient de longues listes en mode “dossier” avec ``
  • La raison la plus fréquente, c’est qu’ils n’ont pas envie d’écraser le style de bouton par défaut