web-dev-qa-db-fra.com

Est-ce mal de styliser un bouton comme une ancre?

J'ajoute actuellement un avis à notre flux d'application qui est divulgué par l'action de l'utilisateur. L'idée est que cet avis est spécifique à certaines situations de notre flux, et ne s'applique en aucun cas (c'est pourquoi il est affiché au clic).

Actuellement, j'utilise un <button> élément pour cela, qui est stylisé comme un lien: pas de bordures, couleur de fond et texte souligné. Ceci est cohérent avec le reste de l'application (qui a été construite par mon prédécesseur). Un exemple de comment cela peut être vu dans mon Codepen ici .

Mais je me demande si c'est correct du tout? J'utilise en fait les styles visuels d'un lien hypertexte pour un élément avec l'action d'un bouton. Même dans notre application, des liens hypertexte sont utilisés (par exemple pour créer un lien vers un PDF qui est ouvert dans un nouvel onglet), ce qui peut conduire à une confusion potentielle.

D'un autre côté, comme indiqué par cette question sur le style d'étiquette de case à cocher , vous pouvez faire valoir que l'élément est cliquable, ce qui prendrait en charge cette forme de style.

Est-ce une bonne façon de procéder ou est-il documenté comme un élément ux déroutant?

3
Lodybo

Les utilisateurs ne se soucient pas de l'implémentation sous-jacente. Ils ne se soucient pas si l'élément est un link, button ou gerbil. Il pourrait charger de l'hypertexte, exécuter un script ou envoyer un petit rongeur dans un tube. Ils s'en moquent. Tout ce qu'ils savent et se soucient de ce qu'ils voient. S'il ressemble à un lien, ils s'attendent à ce qu'il ressemble à un lien. S'il ressemble à un bouton, ils s'attendent à ce qu'il ressemble à un bouton.

Ainsi, je ne vois pas de problème avec un style de bouton comme un lien tant qu'il agit comme un lien. Cela signifie plus que d'être cliquable. Cela signifie qu'il navigue, ou du moins charge le contenu d'une manière ou d'une autre. Dans le but de montrer un avis, je pense que votre conception est correcte.

Il en va de même dans l'autre sens. Si un lien effectue une action sur les données sous-jacentes (par exemple, supprime un article d'un panier), il doit être stylisé pour ressembler à un bouton. Utilisez une image si vous le devez.

2
Michael Zuschlag