Enlace o botón, esa es la cuestión

¿Qué es un enlace?

Definición

Un link/enlace/elemento ancla es un elemento interactivo que redirecciona al usuario a una nueva ubicación la cual puede ser una página diferente, una ubicación distinta en la misma página (se modifica el URL en ese caso con un parametro #) o también se puede utilizar para descagar un archivo, entre otras cosas. Al activarse, lleva al usuario a la URL definida en su href. El navegador guarda esa navegación en su historial, de modo que el usuario puede volver a la página anterior.

Semántica

Para que el elemento tenga carga semántica de elemento interactivo, tiene que si o si tener un atributo href con una URL válida o un IDREF que apunte a un elemento en la misma página, de lo contrario va a ser tratado como un elemento genérico.

<a href="/URL">
  Ir a la página principal
</a>

Interacción con el teclado

Solo se puede activar con la tecla Enter. Si se presiona la tecla Space mientras el foco esta en el enlace, la página va a scrollear hacia abajo.

Interacción con lectores de pantalla

Los lectores de pantalla, generalmente, anuncian el elemento de la siguiente manera: "Enlace, [Nombre accessible del enlace]" por lo cual es importante que el enlace tenga un nombre accesible pertinente y descriptivo.

Malas prácticas

Es totalmente inaceptable, una mala práctica y va en contra del funcionamiento nativo del elemento, forzar a un enlace a comportarse como un botón de la siguiente manera:

<a href="javascript:void(0)" onclick="openModal()">
  Abrir menu
</a>

<a href="#" role="button" onclick="boton()">
  Enlace con rol botón
</a>

Si necesitas hacerlo, quiere decir que necesitas un botón

¿Qué es un botón?

Definición

Un botón es un elemento interactivo que al ser cliqueado ejecuta una acción dentro de la página donde se encuentra. NO redirige al usuario a otro lugar, ni modifica la URL. Las acciones ejecutadas pueden ser abrir un modal, reproducir un vídeo, publicar un comentario, etc.

Semántica

El botón necesita el atributo type según la acción que vaya a llevar a cabo.
- type="button": se utiliza si el botón no tiene un comportamiento determinado.
- type="submit": se utiliza si el botón envía información a un servidor.
- type="reset": se utiliza para resetear todos los inputs de un formulario a su valor inicial.

<button type=”button” onclick="openModal()">
  Abrir modal
</button>

Interacción con el teclado

Solo se puede activar con la teclas Enter o Space.

Interacción con lectores de pantalla

Los lectores de pantalla, generalmente, anuncian el elemento de la siguiente manera: "Botón, [nombre accessible del botón]" por lo cual es importante que el botón tenga un nombre accesible pertinente y descriptivo.

Mala práctica

Es totalmente inaceptable, una mala práctica y va en contra del funcionamiento nativo del elemento, forzar a un enlace a comportarse como un botón de la siguiente manera:

<button onclick="window.location.href='/'">
  Ir a página de inicio
</button>

Si necesitas hacerlo, quiere decir que necesitas un enlace

¿Enlace o botón? ¿Cuál debo usar según mi necesidad?

• ¿Necesitas expandir una sección? Usá un <button> con el estado aria-expanded y el foco debe mantenerse en el botón.
• ¿Necesitas saltar a una sección dentro de la misma página? Usa un <a href="#section">. No tiene que haber una actualización de la página, se modifica el URL con la nueva referencia ID y se redirige al usuario a la nueva ubicación.
• ¿Necesitas cargar más ítems en una lista? Usa un <button> y cuando los nuevos ítems se carguen, el foco se debe ubicar en el primer nuevo ítem.
• ¿Necesitas redirigir al usuario a una nueva ubicación para que lea más sobre algo? Usa un <a href="/destination">.
• ¿Necesitas abrir un menú? Usa un <button> con los estados aria-haspopup y aria-expanded.
• ¿Necesitas reproducir o pausar un vídeo? Usa un <button>.
• ¿Necesitas descargar un archivo? Usa un <a> con el atributo download.
• ¿Necesitas que una sección lleve al usuario a la página de detalles? Usa un <a> estirado con un ::after.

Estilo del foco para elementos interactivos

Para los usuarios de teclado y lectores de pantalla es vital que los elementos interactivos tengan una un foco visual y lógico. Nunca hagas outline: none sin antes estilar el foco:

a:focus-visible,
button:focus-visible {
  outline: 4px solid #0066ff;
  outline-offset: 4px;
}