Una tarjeta que también funciona con teclado.

Una tarjeta parece una pieza sencilla: un título, una descripción y una flecha. Pero su comportamiento depende de una decisión básica: ¿lleva a otra página o ejecuta una acción? En este ejemplo navega a un proyecto, así que usaremos un enlace.

Empieza por el elemento correcto

Un enlace con href ya participa en la navegación por teclado y permite abrir el destino en una pestaña nueva. No hace falta reproducir ese comportamiento con un div y un evento de clic.

<a class="project-card" href="/proyectos/mi-proyecto/">
  <span class="category">Diseño y desarrollo</span>
  <h2>Mi proyecto <span aria-hidden="true">↗</span></h2>
  <p>Una herramienta para organizar ideas y darles un siguiente paso.</p>
</a>

El destino es ilustrativo: reemplázalo por una página real de tu sitio. El título describe el enlace y la flecha es decorativa, por eso queda fuera del nombre accesible.

Haz visible el foco

No todas las personas usan un cursor. Quien navega con Tab necesita saber qué elemento tiene el foco. Dale un tratamiento tan cuidado como al estado de hover.

.project-card {
  display: block;
  padding: 2rem;
  border: 1px solid #444;
  border-radius: 12px;
  color: #f3f1ed;
  background: #171717;
  text-decoration: none;
}
.project-card:hover {
  border-color: #ff9b56;
}
.project-card:focus-visible {
  outline: 3px solid #ff9b56;
  outline-offset: 5px;
}

Mantén una sola interacción

Si toda la tarjeta es un enlace, evita colocar un botón o un segundo enlace dentro. Las interacciones anidadas hacen difícil entender qué se activa y pueden producir HTML inválido.

Cuando una tarjeta necesita varias acciones, usa un contenedor como article y coloca enlaces separados con nombres claros. La estructura debe reflejar la acción real.

Recorre la tarjeta sin ratón

Pulsa Tab hasta llegar a ella. Verifica que el contorno se vea entero, incluso cerca de otros elementos. Pulsa Enter y comprueba el destino. Después aumenta el zoom del navegador: el título y la descripción deberían seguir siendo legibles, sin recortes.

Repite la comprobación en móvil. Un texto más largo no debería romper la tarjeta ni ocultar información. Puedes partir de los ejemplos del kit UI esencial y adaptarlos a tu diseño.

Referencia: el elemento de enlace en MDN.

Resultado y errores habituales

La tarjeta debe recibir un único foco, mostrar su contorno y abrir el destino al pulsar Enter. También debe permitir abrir el enlace en otra pestaña desde el menú del navegador.

• Si Tab no llega a la tarjeta, confirma que es un enlace con href.
• Si el contorno se corta, revisa el overflow del contenedor y el espacio alrededor de la tarjeta.
• Si dos acciones compiten dentro de la tarjeta, separa los enlaces fuera del contenedor enlazado.