Core · Mostrar contenido

Figura

Muestra una imagen, un gráfico o un diagrama con un pie que indica qué representa.

components/figure.css
Sin JavaScript
Claro · Oscuro · Alto contraste
Sin problemas conocidos

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Un gráfico de barras con un pie que explica qué muestra.

Requests per day, last six days.

Problemas conocidos

Ninguno conocido.

Código

Copiar el marcado

HTML

<figure class="luz-figure">
  <div class="luz-figure__media">
    <img src="requests.png" width="640" height="192" alt="Bar chart: requests rise every day, from 1,200 on Monday to 3,400 on Saturday.">
  </div>
  <figcaption class="luz-figure__caption">Requests per day, last six days.</figcaption>
</figure>

Variantes y opciones

No hay modificadores.

Clase	Qué hace
`.luz-figure`	Una superficie con relleno, borde inicial del color de marca y esquinas redondeadas
`.luz-figure__media`	Redondea y recorta la imagen, el gráfico o el código que contiene
`.luz-figure__caption`	Más pequeño, en cursiva y con el color de texto secundario

Cómo funciona

Elementos nativos <figure> y <figcaption>, con estilos de components/figure.css. No necesitan JavaScript.

El pie identifica la figura para la tecnología de asistencia.
Un <figure> sin clases también recibe un estilo básico de los elementos base.

Sin JavaScript

No cambia nada: una figura usa HTML y CSS.

Teclado y ARIA

Una figura no es interactiva ni recibe el foco.

El contenido multimedia necesita su propia alternativa textual: alt en un <img>, o role="img" y aria-label en un <svg> en línea.
Un gráfico también necesita que sus datos aparezcan como texto: en el texto alt, en el pie o en una tabla junto al gráfico.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa una figura para un gráfico, una imagen, un diagrama o un fragmento de código al que haga referencia el texto y que necesite un pie.

Cuándo no usarlo

No uses una figura con fines decorativos.

Una imagen decorativa lleva alt="" y no necesita una figura.
Para mostrar una imagen en un cuadro con forma fija, usa el marco de imagen.

Qué hacer y qué no

Hazlo Escribe un pie que explique qué muestra la figura y de qué periodo.

Evítalo No uses «Figura 1» como pie: el lector conoce el número, pero no qué muestra el gráfico.

Cómo escribir el contenido

El pie indica qué muestra la figura y de qué periodo o ámbito.

El texto alt describe lo que vería el lector: la tendencia, no «gráfico».
No repitas el pie en el texto alt.

Contraste y foco

El pie usa texto secundario sobre la superficie de la figura.

Parte	Color sobre el fondo	Claro	Oscuro	Alto contraste	Mínimo
Pie	`--luz-text-secondary` on `--luz-surface`	6.4:1	6.9:1	19.3:1	4.5:1

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

Foco: la figura no lo recibe.
Gráficos: tú eliges los colores del contenido multimedia; procura que las partes del gráfico que transmiten significado tengan una relación de 3:1 con el fondo (WCAG 1.4.11). El borde inicial de marca es decorativo.

Tokens que usa

Los 7 tokens que lee components/figure.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color: --luz-brand-primary, --luz-surface, --luz-text-secondary
Spacing and sizing: --luz-space-lg, --luz-space-sm, --luz-space-xs
Radius: --luz-radius-md

El teclado y ARIA están en la pestaña Código.