Patrones de implementación accesibles para componentes tipo tarjeta

Los componentes tipo tarjeta se usan con frecuencia en listados de artículos. Aunque su aspecto es sencillo, considerarlos desde la accesibilidad plantea retos de diseño sorprendentemente profundos.

Como ejemplo de una tarjeta típica, de arriba abajo:

• Imagen
• Título del artículo
• Resumen del artículo
• Enlace de detalles

, veamos un patrón de implementación con un diseño de disposición vertical.

Principales puntos a considerar en el diseño

1. Orden visual y estructura HTML

Los lectores de pantalla leen el contenido, en general, siguiendo el orden en que aparece en el HTML. En el criterio de éxito 1.3.2 de WCAG 2.0 (Secuencia significativa, nivel A), el principio básico es que el orden visual y el orden del HTML coincidan.

Sin embargo, cambiar el orden con CSS no constituye por sí mismo un incumplimiento de WCAG. Si el contenido se entiende correctamente aunque el orden visual y el orden del HTML sean distintos, no hay problema. Lo importante es evaluar cada caso de forma flexible.

2. Tratamiento de las imágenes

Las imágenes de las tarjetas de artículos suelen ser decorativas. Como el título del artículo transmite el contenido con suficiente claridad, en general hay poca necesidad de leer en voz alta la descripción de la imagen.

Cuando se traten como imágenes decorativas, alt="" es suficiente.

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

3. Etiquetas de los enlaces de detalle

Los textos genéricos como "Ver más" deben evitarse por los siguientes motivos.

Problemas visuales

Sin el contexto circundante, no es posible saber a qué enlace se refiere.

Problemas con los lectores de pantalla

Al mostrar los enlaces en una lista de enlaces, todos aparecen como "Ver detalles" y no se pueden distinguir entre sí.

Problemas con el reconocimiento de voz

Cuando hay varios textos idénticos, es necesario seleccionarlos por número, lo que complica la operación.

Lo ideal sería usar un texto que indique por sí solo el destino del enlace, como "Ver detalles de [nombre]". Sin embargo, aquí se explica cómo implementar el diseño "Ver detalles" tal como está, sin cambios.

4. Área clicable de la tarjeta

Para mejorar la experiencia de usuario, con frecuencia se desea que toda la tarjeta sea clicable. Existen varias formas de implementarlo, y cada una tiene un impacto distinto en la accesibilidad.

5. ¿Usar article o div para la tarjeta?

La elección depende de la naturaleza del contenido.

<article>Es adecuado cuando:

• El contenido de la tarjeta funciona como contenido independiente

<div>Es aceptable cuando:

• Funciona simplemente como un grupo de enlaces
• La tarjeta en sí no tiene independencia semántica

En listados habituales de artículos de blog o de productos, <article> es lo apropiado. Sin embargo, si se utilizan varios <article>, se recomienda tener en cuenta la navegación por puntos de referencia de los lectores de pantalla e identificar cada artículo mediante aria-labelledby o aria-label (WCAG 2.4.6, nivel AA).

Al usar aria-labelledby, asegúrese de que los ID sean valores únicos.

Orden visual y estructura HTML

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

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
</article>

Como el orden de escritura del HTML coincide por completo con el orden visual, la estructura es sencilla e intuitiva.

Nota: <article>Se recomienda que el primer elemento sea un encabezado, pero no es un requisito absoluto. Si se prioriza la coincidencia con el orden visual, este patrón no presenta problemas.

Nota adicional:

El software de reconocimiento de voz (Dragon, Voice Control, etc.) funciona en función del texto mostrado en pantalla. Al usar visually-hidden (sr-only), se conserva el texto visual y es posible operar mediante reconocimiento de voz. Además, a continuación se muestran ejemplos de implementación de etiquetas de enlace con patrones correctos e incorrectos.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているのでOK -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
  詳細を見る
</a>
<a href="#" aria-label="詳細を見る：記事タイトル">
  詳細を見る
</a>
<!-- 以下は可視テキストがアクセシブルな名前に含まれていないのでNG -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
  詳細を見る
</a>
<a href="#" class="card-detail-link" aria-label="記事タイトル">
  詳細を見る
</a>

Patrón 2: Ajuste del orden visual con CSS order

<article class="article-card" aria-labelledby="article-title">
  <h3 id="article-title"><a href="#">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
  <img src="thumbnail.jpg" alt="">
</article>

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

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

Dado que <article>el primer elemento es un encabezado, esta estructura es semánticamente más adecuada.

En el caso de las imágenes decorativas (alt=""), no hay impacto en el orden de lectura, ya que las imágenes se omiten.

Atención:

• Cuando la imagen tiene significado y se especifica un atributo alt, esta estructura no es adecuada, ya que el orden visual y el orden de lectura cambian.
• El orden de tabulación del teclado sigue el orden del HTML, por lo que, si hay varios elementos enfocables dentro de una tarjeta, asegúrese de que el orden de foco no interrumpa el flujo lógico.

Si desea que toda la superficie de la tarjeta sea clicable

Patrón 3: hacer toda la tarjeta clicable mediante un pseudoelemento

En este método, el pseudoelemento del enlace del título cubre toda la tarjeta, y el texto "Ver detalles" se usa solo como elemento decorativo <span>visual.

Creo que es mejor <span>mantener "Ver detalles" <a>tal cual, en lugar de usar tabindex="-1" o aria-hidden="true", ya que en la lista de enlaces de los lectores de pantalla y en el modo de navegación por elementos generaría ruido.

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <span class="card-detail-link">詳細を見る</span>
</article>

.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;
}

Ventajas:

• Permite mantener una estructura semántica
• Los lectores de pantalla lo leen de forma natural
• Permite colocar varios enlaces dentro de la tarjeta (categorías, etiquetas, enlaces de autor, etc.)

Desventajas:

• Es necesario gestionar z-index (aunque, una vez configurado, no genera problemas)

Patrón 4: envolver toda la tarjeta con <a>

En este enfoque, toda la tarjeta constituye un único enlace, por lo que "Ver detalles" se convierte de forma natural en <span>

<article class="article-card" aria-labelledby="article-title">
  <a href="#" class="card-link">
    <img src="thumbnail.jpg" alt="">
    <h3 id="article-title">記事タイトル</h3>
    <p>記事の概要...</p>
    <span class="card-detail-link">詳細を見る</span>
  </a>
</article>

Ventajas:

• Implementación sencilla
• Fácil de ajustar con CSS

Desventajas:

• Según el lector de pantalla, es posible que todo el texto se lea de forma concatenada (en VoiceOver, en particular, se lee como "Título del artículo, resumen del artículo... Ver detalles, enlace").
• No es posible colocar varios enlaces dentro de la tarjeta

Ejemplos de muestra de cada patrón

Conclusión

Existen múltiples enfoques para implementar componentes de tarjeta accesibles. Lo importante es que no existe un patrón de implementación que sea "la única respuesta correcta"; la solución más adecuada varía según la situación.

Al implementarlo, es importante tener en cuenta lo siguiente.

1. Elegir una implementación que no cause problemas a las personas que la usan
2. Considerar el significado de las imágenes, el propósito de la tarjeta y la estructura general del sitio
3. Priorizar implementaciones prácticas y fáciles de mantener