Visualizaciones.
Usar una visualización cuando una relación cuantitativa se entiende mejor que en una tabla breve.
Cuándo usar
Usar una visualización cuando una relación cuantitativa se entiende mejor que en una tabla breve.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
98 → 112 puntos · ejemplo ficticio, sin datos reales.
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Título declarativo |
| 2 | Área gráfica |
| 3 | Ejes y unidades |
| 4 | Leyenda |
| 5 | Anotaciones |
| 6 | Tabla o resumen equivalente |
| 7 | Fuente y frescura |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| loading | Reserva proporción y nombra el dato |
| ready | Escalas y unidades visibles |
| partial | Advierte cobertura |
| empty | Distingue cero de ausencia |
| error | Explica fuente y recuperación |
Accesibilidad
- SVG o canvas recibe resumen y alternativa tabular.
- Tooltips son complementarios.
- La paleta funciona con deficiencias de visión de color.
- Teclado accede a puntos relevantes cuando la interacción es necesaria.
HTML de referencia
<figure class="cis-chart">
<figcaption>Desempleo regional, 2022 a 2026</figcaption>
<div role="img" aria-describedby="chart-summary">…</div>
<p id="chart-summary">La tasa sube de 7,2% a 8,1%.</p>
<a href="#tabla-datos">Ver datos en tabla</a>
</figure>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.