La tarjeta es uno de los componentes más habituales de una UI (interfaz de usuario). Una tarjeta agrupa la información de un solo elemento o tema. Se usan tarjetas cuando una página muestra varios elementos a la vez.
Por ejemplo:
- Una lista de artículos de un blog
- Una lista de productos de una tienda online
- Una lista de hoteles en una app de viajes
Una tarjeta suele resumir una página más larga. La información completa vive en su propia página.
Convertir toda la tarjeta en un enlace es habitual, y es una buena práctica: da a las personas un área mucho más grande para hacer clic o tocar. Pero la forma de construir ese enlace puede crear problemas de accesibilidad.
A continuación tienes tres implementaciones. Usa la tercera.
Implementación 1: enlaces repetidos
La primera opción enlaza varios elementos dentro de la tarjeta en lugar de uno. Hace años era habitual. Hoy se ve menos.
El problema: varios textos distintos enlazan al mismo destino.
Una tarjeta de producto construida así contiene:
- Un enlace con el nombre del producto como texto. Por ejemplo, «Auriculares inalámbricos Aurora 2».
- Una imagen con texto alternativo. Por ejemplo, «Auriculares inalámbricos Aurora 2, Pizarra».
- Un botón con una llamada a la acción. Por ejemplo, «Añadir al carrito», o «Añadir los auriculares inalámbricos Aurora 2 al carrito» como texto solo para lectores de pantalla.
A mucha gente esto le parece correcto:
- Hay varios elementos enlazados, así que el área de clic es grande
- La imagen tiene texto alternativo
- El botón tiene un nombre accesible completo
Con un lector de pantalla la experiencia es distinta. Oyes casi el mismo nombre de enlace tres veces en cada tarjeta de la lista.
Implementación 2: un solo enlace alrededor de toda la tarjeta
Un enlace en lugar de tres parece una mejora clara. Pero trae sus propios problemas:
- Los elementos semánticos dentro del enlace, como un encabezado, hacen confusa la navegación con lector de pantalla.
- Puede incumplir criterios de conformidad de las WCAG (Pautas de Accesibilidad para el Contenido Web) sobre información y relaciones, y sobre etiquetado.
- No puede contener elementos interactivos como botones. Poner un texto con aspecto de botón no lo soluciona: empeora la accesibilidad.
Una variante de este enfoque coloca el enlace fuera de la tarjeta y usa CSS (Hojas de Estilo en Cascada) para estirarlo por encima. Evítala también. La posición del enlace en el DOM (Modelo de Objetos del Documento) no coincide con el lugar donde aparece en pantalla, así que el orden de lectura y el orden visual no concuerdan. Además, casi siempre el enlace se implementa sin nombre accesible.
Implementación 3: el patrón stretched link
El patrón stretched link (enlace estirado) es el estándar actual del sector. Mantienes la semántica de la tarjeta y usas CSS para ampliar el área de clic:
- Construye la tarjeta con HTML semántico y enlaza un solo elemento, como el título.
- Usa CSS para estirar ese enlace sobre toda la tarjeta. Nada se mueve y nada se duplica.
Se consigue con cuatro reglas:
- Aplica
position: relativeal contenedor de la tarjeta. - Añade un pseudoelemento (
::beforeo::after) al enlace. - Aplica
position: absoluteal pseudoelemento. - Aplica
inset: 0para que ocupe toda la tarjeta.
Puedes seguir añadiendo un botón a la tarjeta, porque el botón queda fuera del enlace. Ten cuidado con una cosa: un botón en cada tarjeta recupera la repetición de la implementación 1. Dale a cada botón un nombre accesible corto y específico, y después prueba la lista con un lector de pantalla.
Conclusión
Muchas herramientas siguen publicando los patrones antiguos en lugar del stretched link. El problema técnico ya está resuelto. Quedan dos cosas por hacer:
- Saber que el patrón existe.
- Comprobar qué patrón generan las herramientas que usas.