Patrones de implementación accesible para componentes tipo tarjeta

Los componentes tipo tarjeta se utilizan frecuentemente en listas de artículos y similares. Aunque su apariencia es simple, cuando se considera la accessibility surge una compleja problemática de diseño.

Como tarjeta típica, de arriba hacia abajo

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

y consideremos patrones de implementación en un diseño dispuesto verticalmente.

Puntos principales a considerar en el diseño

1. Orden visual y estructura HTML

Los lectores de pantalla básicamente leen el contenido en el orden en que aparece en el HTML. La Pauta de Accesibilidad para el Contenido Web (WCAG) 2.0, Criterio de Conformidad 1.3.2 (orden significativo, Nivel A) establece que hacer coincidir el orden visual con el orden del HTML es un principio fundamental.

Sin embargo, cambiar el orden mediante CSS no es en sí mismo una violación de WCAG. Si el contenido sigue siendo comprensible aunque el orden visual difiera del orden del HTML, no hay problema. Es importante tomar decisiones flexibles según cada situación.

2. Cómo manejar imágenes

Las imágenes en las tarjetas de artículos generalmente son decorativas. Si el título del artículo está presente, el contenido se comunica suficientemente, por lo que la necesidad de que un lector de pantalla describa la imagen es baja.

Si se trata una imagen como decorativa, alt="" es suficiente.

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

3. Etiqueta de enlace "Ver más"

El texto genérico como "Ver más" debe evitarse por las siguientes razones.

Problema visual

Sin el contexto circundante, es imposible determinar a qué se refiere el enlace

Problema del lector de pantalla

Cuando se muestra una lista con la función de lista de enlaces, todos se etiquetan como «Ver detalles» y no se pueden distinguir entre sí

Problema de reconocimiento de voz

Cuando hay múltiples textos idénticos, es necesario seleccionar por número, lo que complica la operación

Lo ideal sería que el texto del enlace fuera autoexplicativo, como «Ver detalles de XX», de modo que el propósito fuera claro con solo el enlace. Aquí, sin embargo, explicamos cómo implementar el caso en el que se reproduce tal cual el diseño de «Ver detalles».

4. Área clicable de la tarjeta

A menudo es deseable hacer toda la tarjeta clicable para mejorar la experiencia del usuario. Existen múltiples formas de implementarlo, pero cada una tiene diferentes implicaciones para la accesibilidad.

5. ¿Debería la tarjeta ser un elemento article o div?

Cuál usar depende de la naturaleza del contenido.

es apropiado cuando:

El contenido de la tarjeta constituye un contenido independiente

Si funciona sin problemas:

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

En listas de artículos de blog o catálogos de productos típicos, es apropiado. Sin embargo, cuando se usan múltiples , se recomienda que se considere la navegación de puntos de referencia de los lectores de pantalla y que cada artículo sea identificable mediante aria-labelledby o aria-label (WCAG 2.4.6, Nivel AA).

Al utilizar aria-labelledby, tenga cuidado de que los ID sean valores únicos.

Orden visual y estructura HTML

Patrón 1: Alinear 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>

Dado que el orden de escritura HTML coincide completamente con el orden visual, es simple e intuitivo.

Nota: Aunque se recomienda que el primer elemento de sea un encabezado, no es un requisito absoluto. Si da prioridad a la coincidencia con el orden visual, este patrón no presenta problemas.

Información adicional:

El software de reconocimiento de voz (como Dragon, Voice Control, etc.) funciona basándose en el texto que se muestra en la pantalla. Al usar visually-hidden (sr-only), se preserva el texto visual y se habilita la operación mediante reconocimiento de voz. A continuación se muestran ejemplos de implementación de patrones correctos e incorrectos en la configuración de etiquetas de enlace.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているので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: Ajustar el 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;
}

Como el primer elemento de es un encabezado, esta es una estructura semánticamente más deseable.

En el caso de imágenes decorativas (alt=""), no hay impacto en el orden de lectura (la imagen se omite).

Nota:

Si la imagen tiene significado y se especifica un atributo alt, esta estructura no es adecuada porque cambia el orden visual y el orden de lectura.
El orden de tabulación del teclado sigue el orden del HTML, por lo que si hay múltiples elementos enfocables dentro de una tarjeta, debe verificar que el orden de enfoque no interrumpa el flujo lógico.

Cuando desee que toda el área de la tarjeta sea clicable.

Patrón 3: Hacer que toda la tarjeta sea clicable con pseudoelementos

En este método, el pseudoelemento del enlace del título cubre toda la tarjeta, y "Ver más" se convierte en una decoración visual usando .

Mantener "Ver detalles" como , incluso con tabindex=\"-1\" o aria-hidden=\"true\", genera ruido en la lista de enlaces del lector de pantalla y en el modo de navegación por elementos. Por eso consideramos que es mejor convertirlo a .

<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:

Mantener una estructura semántica
Se lee naturalmente con lectores de pantalla
Se pueden colocar varios enlaces dentro de la tarjeta (enlaces de categoría, etiqueta, autor, etc.)

Desventajas:

Se requiere gestionar z-index (aunque una vez configurado, no hay problema).

Patrón 4: Envolver toda la tarjeta con

Con este método, como la tarjeta completa se convierte en un único enlace, "Ver detalles" se vuelve naturalmente .

<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 simple
Fácil ajuste de CSS

Desventajas:

Algunos lectores de pantalla pueden concatenar todo el texto durante la lectura (especialmente VoiceOver lee "título del artículo, resumen del artículo... ver más, enlace").
No se pueden colocar múltiples enlaces dentro de la tarjeta

Ejemplos de cada patrón

Conclusión

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

Es importante considerar lo siguiente al implementar:

Elige una implementación que no cause problemas a los usuarios finales
Considera el significado de la imagen, la función de la tarjeta y la estructura general del sitio
Prioriza implementaciones prácticas y fáciles de mantener