Un botón es un botón, un enlace es un enlace y lo demás no debe ser ni un botón ni un enlace

En You can’t create a button se explica un error de accesibilidad tremendamente común: tratar un enlace como si fuera un botón, un botón como si fuera un enlace, o cualquier otra cosa como un div o un span en un enlace o un botón.

Cuando los enlaces parece botones (y al revés)

Usar un botón como si fuera un enlace, o un enlace como si fuera un botón, es algo muy común, y es un completo error.

Cuando un lector de pantalla lee una página web, anuncia al usuario los elementos que encuentra en la página. Le puede decir cosas como "lista", "imagen", "botón" y "enlace".

Cuando un usuario oye "botón", no espera que cuando lo use se navegue a otra página web, a no ser que sea el botón de envío de un formulario.

Cuando un usuario oye "enlace", espera que cuando lo use se navegue a otra página web, no espera que no ocurra nada y no cambie la página web en la que se encuentre.

En el pasado ya he escrito algunas entradas sobre este tema:

• Uso correcto de los botones y enlaces (9/11/2015)
• Un enlace es un enlace y un botón es un botón (29/5/2017)

Ahora he encontrado But sometimes links look like buttons (and buttons look like links), una lectura muy interesante para complementar las anteriores.

Un enlace es un enlace y un botón es un botón

El uso incorrecto de los elementos de HTML para que "hagan" cosas que no deben hacer es muy común. Los elementos de HTML tienen su semántica que no se debe violar.

Un error muy típico es confundir la función que debe realizar un enlace o un botón. Estos dos artículos hablan de ello:

• Links are not buttons. Neither are DIVs and SPANs
• Links vs. Buttons in Modern Web Applications

Uso correcto de los botones y enlaces

Si algo es un botón, utiliza las etiquetas para crear botones.

Si algo es un enlace, utiliza la etiqueta para crear un enlace.

Por favor, no cambies la semántica de los componentes de la interfaz de usuario: Proper Use of Buttons and Links.