figure

Cuándo utilizarlo

Se recomienda usar <figure> y <figcaption>. El elemento nativo gestiona el rol, la asociación con el pie de figura y la semántica de estructura del documento.

role="figure" es apropiado únicamente cuando no es posible usar el elemento nativo. En ese caso, se debe proporcionar un nombre accesible: bien un aria-labelledby que apunte a un elemento de pie de figura, bien un aria-label que contenga el texto del pie.

Una figura anuncia «figura, [pie]» en los lectores de pantalla, indicando que el contenido que sigue es ilustrativo y no prosa corrida. Conviene utilizarlo para listados de código, esquemas, gráficos e imágenes en línea que merezcan un pie de figura, no para cualquier imagen decorativa.

Errores frecuentes

• <figure> sin <figcaption> ni aria-label. La figura carece de nombre accesible y el rol aporta poco valor.
• role="figure" sobre un <div> que envuelve un <img> cuyo atributo alt ya cubre la descripción. Resulta redundante; basta con el <img>.
• Colocar <figcaption> fuera de <figure>. El pie debe ser un hijo directo del elemento para que la asociación nativa funcione.
• Varios elementos figure en una misma página con el mismo texto de pie. Se debe añadir aria-labelledby apuntando a un elemento único para que la navegación por figuras funcione correctamente.
• role="figure" aplicado directamente a un <img>. Debe usarse en el elemento contenedor, con la imagen en su interior.

Ejemplo

<!-- Preferido -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Focus indicator stuck on a modal overlay with no escape route">
  <figcaption>Una trampa de teclado dentro de un modal mal construido.</figcaption>
</figure>

<!-- Cuando <figure> no es posible -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Orden de tabulación en una aplicación de página única inaccesible.</p>
</div>