Topics

Los componentes de tipo tarjeta se utilizan a menudo en listas de artículos, etc. Aunque parecen simples, existen problemas de diseño sorprendentemente profundos al considerar la accesibilidad.

Una tarjeta típica desde arriba

• imagen
• Título del artículo
• Resumen del artículo
• Enlace para más detalles

Consideremos un patrón de implementación para un diseño vertical.

Puntos principales a tener en cuenta al diseñar

1. Orden visual y estructura HTML

Los lectores de pantalla generalmente leen HTML en el orden en que está escrito.Criterio de éxito 1.3.2 (Secuencia significativa, nivel A)Entonces,El principio básico es hacer coincidir el orden visual con el orden HTML.Esto es lo que estamos diciendo.

Sin embargo, cambiar el orden en CSS no infringe las WCAG. No hay problema si el orden visual y el orden HTML son diferentes, siempre que el contenido sea comprensible. Es importante ser flexible y tomar decisiones según la situación.

2. Cómo manejar imágenes

Las imágenes en las tarjetas de artículos suelen serdecorativoEl título del artículo es suficiente para transmitir el contenido, por lo que no es necesario leer la descripción de la imagen.

Cuando se trata como una imagen decorativaalt=""es suficiente

<img src="thumbnail.jpg" alt="">

3. Etiqueta de enlace de detalles

Se debe evitar un texto genérico como "Más información" por las siguientes razones:

Problemas visuales

Es difícil saber qué es un enlace sin el contexto que lo rodea.

Problemas con el lector de pantalla

Cuando se muestran en una lista utilizando la función de lista de enlaces, todos los enlaces están etiquetados como "Ver detalles" y son indistinguibles (WCAG 2.4.4 Propósito del enlace, Nivel A)

Problemas de reconocimiento de voz

Si hay varios textos idénticos, necesitarás seleccionarlos por número, lo que complica el proceso.

Lo ideal es que el enlace tenga un texto que deje claro su propósito solo desde el enlace, como "Ver detalles sobre XX", pero aquí cubriremos cómo implementarlo si desea reproducir exactamente el diseño de "Ver detalles".

4. Áreas de tarjetas en las que se puede hacer clic

Para mejorar la experiencia de usuario (UX), suele ser recomendable que toda la tarjeta sea cliqueable. Hay varias maneras de lograrlo, cada una con diferentes impactos en la accesibilidad.

5. ¿Las tarjetas deben ser artículos o divs?

La elección depende de la naturaleza del contenido.

<article>Adecuado cuando:

• El contenido de la tarjeta se presenta como una pieza de contenido independiente.

<div>Si está bien:

• Simplemente actúa como un grupo de enlaces.
• Las tarjetas en sí no tienen independencia semántica.

Para listas de publicaciones de blog generales o tarjetas de listas de productos,<article>Sin embargo, múltiples<article>Al utilizarlo, tenga en cuenta el movimiento de referencia del lector de pantalla.aria-labelledbyoaria-labelSe recomienda utilizar una etiqueta CSS3 para identificar cada artículo (WCAG 2.4.6, Nivel AA).

aria-labelledbySi usa esto, asegúrese de que el ID sea un valor único.

Orden visual y estructura HTML

Patrón 1: Hacer coincidir el orden visual con el orden HTML

 Título del artículo>/a>

Resumen del artículo...

Título del artículo:>/span>Ver detalles

Es simple e intuitivo, ya que el orden HTML coincide perfectamente con el orden visual.

※ <article>El primer elemento de un encabezado es preferible, pero no es un requisito indispensable. Si prioriza la coherencia con el orden visual, este patrón es adecuado.

suplemento:

El software de reconocimiento de voz (Dragon, Voice Control, etc.) funciona en función del texto que se muestra en la pantalla.visually-hidden (sr-only)Al usar esto, se conserva el texto visual y se posibilita la operación mediante reconocimiento de voz. Además, se incluyen ejemplos de patrones OK y NG para la compatibilidad con etiquetas de enlace.

<!-- Lo siguiente es correcto porque el texto visible está incluido en el nombre accesible -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
Ver detalles
</a>
<a href="#" aria-label="Ver detalles: Título del artículo">
Ver detalles
</a>
<!-- Lo siguiente NO es correcto porque el texto visible no está incluido en el nombre accesible -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
Ver detalles
</a>
<a href="#" class="card-detail-link" aria-label="Título del artículo">
Ver detalles
</a>

Patrón 2: Ajustar el orden visual con CSS order

<article class="article-card" aria-labelledby="article-title">
<h3 id="article-title"><a href="#">Título del artículo</a></h3>
<p>Resumen del artículo...</p>
<a href="#" class="card-detail-link">
<span class="visually-hidden">Título del artículo:</span>Ver detalles
</a>
<img src="thumbnail.jpg" alt="">
</article>

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card img {
  order: -1;
}

<article>es una estructura semánticamente más deseable, ya que el primer elemento se convierte en el encabezado.

Imágenes decorativas (alt=""), el orden de lectura no se ve afectado (porque se omiten imágenes).

Aviso:

• Si la imagen es significativa y tiene un atributo alt, esta estructura no es adecuada ya que cambia el orden visual y de lectura.
• El orden de tabulaciones del teclado sigue el orden HTML, por lo que si tiene varios elementos enfocables dentro de una tarjeta, asegúrese de que el orden de enfoque no interrumpa el flujo lógico.

Si desea que se pueda hacer clic en toda el área de la tarjeta

Patrón 3: Hacer que toda la tarjeta sea cliqueable usando pseudoelementos

Este método utiliza un pseudoelemento de enlace de título para cubrir toda la tarjeta, con el botón "Más información" como decoración visual.<span>a.

Haga clic en "Ver detalles"<a>Como están las cosastabindex="-1"oaria-hidden="true"Aun así, será ruidoso en la lista de enlaces de un lector de pantalla o en el modo de navegación de elementos, por lo que<span>Pienso que sería mejor hacer esto.

 Título del artículo>/a>

Resumen del artículo...>/p>
Ver detalles>/span>

.article-card {
  position: relative;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* カード内に複数のリンクがある場合の例 */
.article-card a:not(.card-link) {
  position: relative;
  z-index: 2;
}

Título del artículo>/h3>
Resumen del artículo...>/p>
Ver detalles>/span>

mérito:

• Fácil de implementar
• Ajustes CSS sencillos

Contras:

• Algunos lectores de pantalla pueden leer todo el texto concatenado (especialmente VoiceOver, que dice "Título del artículo, Resumen del artículo... Ver detalles, Enlace").
• No puedes colocar varios enlaces en una tarjeta

Muestras de cada patrón

resumen

Existen múltiples enfoques para implementar componentes accesibles de tipo tarjeta. Lo importante es que no existe un único patrón de implementación correcto.La solución óptima varía según la situación.Eso es lo que significa.

A la hora de implementar, es importante tener en cuenta lo siguiente:

1. Elija una implementación que no cause problemas a los usuarios reales
2. Tenga en cuenta el significado de la imagen, el propósito de la tarjeta y la estructura general del sitio.
3. Priorizar implementaciones prácticas y sostenibles