Los enlaces llevan a lugares y los botones hacen cosas

Aquí tiene la regla que resuelve casi todos los casos: un enlace le lleva a algún sitio y un botón hace que algo ocurra aquí mismo. 🧭

Un enlace permite navegar. Al hacer clic, cambia la página o la URL, como al saltar a otro artículo o a una sección nueva.

Un botón realiza una acción en el mismo lugar: envía un formulario, abre un menú o cambia una configuración sin salir de la página.

Los lectores de pantalla anuncian el rol en voz alta. Los usuarios oyen enlace o botón, por lo que el elemento correcto establece la expectativa adecuada antes de que actúen.

No es solo una cuestión estética. Un botón se activa con la barra espaciadora o Enter, pero un enlace solo se activa con Enter. Las teclas corresponden al rol.

Hágase una pregunta: ¿este control cambia dónde estoy o cambia lo que aparece en pantalla? Navegación significa enlace; acción significa botón.

Si un control podría abrirse razonablemente en una pestaña nueva o añadirse a los marcadores, es navegación, así que use un enlace real con un href.

Los estilos no cambian el significado. Un botón puede parecer un enlace y un enlace puede parecer un botón, pero el elemento determina el rol.

Muchas personas recurren a un div o span con estilos y le añaden un controlador de clic. Parece correcto, pero no tiene rol ni compatibilidad con el teclado.

Para enviar un formulario, use un botón de tipo submit. Es una acción, no navegación, por lo que un enlace sería incorrecto aquí.

Para enviar a un usuario a su página de contacto, use un enlace. Eso es navegación pura, y un botón induciría a error a todo el mundo.

Los enlaces llevan a lugares y los botones hacen cosas. Haga coincidir el elemento con la intención y obtendrá el rol adecuado, las teclas adecuadas y usuarios satisfechos. 🎉