L'absence de "Ouvrir dans un nouvel onglet" est-elle un contre-modèle?
Au fil des ans, avec des applications allant plus "SPA" comme j'ai remarqué de nombreux sites utilisant des gestionnaires de clics JavaScript pour les liens de sites Web qui sont visuellement un hyperlien normal (le lien de connexion sur figma.com par exemple).
Tous les liens dans la navigation ici sont <a href=""> sauf le Log in et Sign Up options, qui ouvrent toutes deux une fenêtre contextuelle.
Personnellement, si j'essaie tous les deux de me connecter, mais peut-être aussi de lire le lien Blog, je peux cliquer avec le bouton droit sur l'un ou les deux et utiliser la fonctionnalité du navigateur pour "Ouvrir dans un nouvel onglet", me laissant avec deux onglets ouverts.
En ne mettant pas <a> élément sur les liens (je peux plus pardonner le bouton) il m'empêche d'utiliser les fonctions du navigateur auxquelles je m'attendrais, ce que je trouve frustrant.
Cela a-t-il été discuté auparavant? est-ce un anti-modèle? Existe-t-il un moyen technique de donner la <a> comportement ainsi que le comportement du popup JavaScript si je ne fais pas un clic droit?
Pour les éléments qui conduisent déjà l'utilisateur à un écran clairement séparé, la fonctionnalité de navigation d'un lien est définitivement préférée.
Pour certains autres éléments, le clic et le geste Ouvrir dans un nouvel onglet effectuent différentes choses. L'icône Review Queues dans le coin supérieur droit de ce site Web ouvre un menu contextuel si je clique dessus, mais m'amène à un écran de files d'attente bien plus grand et séparé si je l'ouvre dans un nouvel onglet.
Je pense que le bouton de connexion dans la question tombe dans cette catégorie, car le comportement est assez clair et souhaité. Mais comme cela entraîne des coûts de mise en œuvre supplémentaires (création de deux vues distinctes ou préservation de l'état du modal), l'équipe a choisi de ne pas déployer cet effort.
Pourtant, d’autres éléments n’ont aucun sens de naviguer. En tapant cette réponse, je vois les boutons de mise en forme ci-dessus. Que se passerait-il si nous pouvions les ouvrir dans un nouvel onglet? Peut-être que la meilleure implémentation ouvrirait une copie de la page avec mon message en gras et même cela est médiocre, car j'aurais deux copies de la réponse inachevée.
Cependant, rien de tout cela n'excuse d'utiliser <a> Avec un attribut href non valide. Si la décision a été prise de ne pas prendre en charge la fonctionnalité Ouvrir dans un nouvel onglet, l'élément utilisé doit être un <button> Pour s'assurer que les navigateurs n'affichent pas la fonctionnalité Ouvrir dans un nouvel onglet.
<a href="#"> Ou <a href="javascript:void(0)"> et similaires sont strictement des erreurs d'ingénierie, car ils annoncent une fonctionnalité qui ne fonctionne pas et laisse l'utilisateur perplexe quant à ce qui s'est passé.
Utilisez le bon outil pour le bon travail
Je pense que le problème ici est la définition de l'action. Prenons la "connexion". Qu'est-ce que tu veux? Laisser l'utilisateur se connecter sur la même page? Ou souhaitez-vous les envoyer sur une nouvelle page afin de vous connecter et les interactions de base (mot de passe oublié?, Par exemple)?.
Si vous pouvez le définir, vous pouvez décider si vous souhaitez mettre un <a> élément ou <button>. Pourquoi? Parce que l'UX (spécifiquement a11y) peut s'améliorer (ou s'aggraver) si vous n'utilisez pas l'élément correct pour un HTML sémantique.
Si vous voulez permettre aux utilisateurs de se connecter sur la même page, vous pouvez mettre un bouton et ouvrir un modal/popup afin de donner les actions.
Si vous voulez envoyer des utilisateurs vers une autre page, vous pouvez mettre un lien et y faire le flux.
Une autre manière pourrait poser un risque en a11y avec des lecteurs d'écran et similaires même avec des étiquettes aria ainsi qu'un antipattern. La meilleure pratique consiste donc à utiliser l'élément correct dans un flux bien défini.