Un enlace o un botó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 estadoaria-expandedy 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 estadosaria-haspopupyaria-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;
}