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.