Bloque de gráficos: gráficos accesibles con ejes honestos

Un bloque de gráfico es una visualización de datos acotada que combina un gráfico con su conclusión, título, etiquetas, fuente, período y una alternativa de datos accesible. Úsalo cuando la forma de los datos responda la pregunta más rápido que una fila de valores exactos.

Por qué importa este elemento

Los gráficos aprovechan el reconocimiento visual de patrones. Un lector puede detectar un aumento, brecha, agrupación o cambio de pendiente antes de comparar los mismos valores celda por celda. Esto ayuda cuando el patrón —no la consulta precisa— es el punto central. También es peligroso: ejes recortados, intervalos desiguales o efectos de área pueden hacer que una pequeña diferencia parezca decisiva. Un gráfico merece su lugar solo cuando reduce el esfuerzo sin alterar la evidencia.

La psicología del lector hace que la conclusión escrita sea esencial. Las personas pueden recordar una dirección o tamaño relativo más fácilmente que una nota al pie. Enuncia la conclusión acotada en texto, incluyendo la población y el período cuando sea necesario. Nunca afirmes causalidad a partir de una correlación ni una tendencia general a partir de un intervalo seleccionado.

La extractabilidad mecánica requiere nombres de series, etiquetas, valores, unidades, fuente, período y conclusión como texto. Un rastreador o motor de respuestas de IA puede no interpretar una ruta SVG, un lienzo (canvas), una captura de pantalla, un estado de hover, una leyenda de colores o una leyenda cromática. Por lo tanto, el bloque empareja lo visual con datos ordenados para tecnología de asistencia, indexación, verificación y reutilización.

Las reglas de redacción de elementos tienen prioridad: selecciona este elemento porque el propósito de un pasaje es revelar un patrón cuantitativo, no porque un gráfico decoraría la página. Si la tarea es una consulta exacta o una comparación elemento por elemento, usa una tabla incluso cuando haya software de gráficos disponible.

Cuándo usarlo

Usa un gráfico cuando el lector necesite ver una de cuatro formas: cambio a lo largo de una secuencia ordenada, diferencias entre un conjunto manejable de categorías, la distribución de observaciones o la relación entre dos variables cuantitativas. Un gráfico de líneas puede revelar dirección a lo largo del tiempo; un gráfico de barras puede clasificar categorías; un histograma puede revelar distribución; y un diagrama de dispersión puede revelar asociación y valores atípicos. El conjunto de datos debe ser suficientemente completo, medido de manera consistente y relevante para la afirmación.

Una prueba simple separa el gráfico de la tabla: si el lector debe notar primero un patrón, elige un gráfico; si debe encontrar un valor exacto, elige una tabla. Si ambos importan, incluye una tabla compacta dentro del bloque de gráfico para que los dos resultados no se desvíen.

Los errores comunes incluyen:

• Dos valores: escribe una oración o una comparación pequeña. Dos barras rara vez revelan un patrón más directamente.
• Una lista larga de categorías: usa una tabla agrupada. Treinta barras crean problemas de etiquetas y diseño en móviles.
• Unas pocas métricas destacadas: usa una banda de estadísticas cuando las cifras sean aspectos destacados independientes en lugar de una serie.
• Un proceso o cronología: usa una línea de tiempo cuando las marcas no codifiquen cantidad.
• Una afirmación causal a partir de una asociación: un diagrama de dispersión puede mostrar que dos variables se mueven juntas; no puede establecer que una causó la otra.
• Una “historia de datos” decorativa: si eliminar el gráfico no elimina ninguna conclusión, elimínalo.
• Una comparación con criterios cualitativos extensos: usa una tabla comparativa porque categorías como la política de soporte o el ajuste de implementación no pueden codificarse honestamente como longitud de barra.

Dónde colocarlo

Coloca el gráfico después del párrafo que introduce la pregunta, población, medida y período. Pon la conclusión directamente antes o después, luego explica las implicaciones y limitaciones. En investigación, cada gráfico pertenece junto a su hallazgo. En un caso de estudio, establece la línea base y la intervención antes de mostrar el cambio.

Mantén el título, elemento visual, leyenda, conclusión, alternativa de datos, fuente y notas dentro de un mismo límite de figura. Las notas al pie pueden seguir a la figura, pero un anuncio, formulario de registro o imagen no relacionada no deben interrumpirla. La fuente debe ser visible sin abrir la alternativa de datos.

No lo coloques junto a otro gráfico igualmente prominente, una tabla independiente o una banda de estadísticas que repita sus datos, una tabla de precios, un carrusel o una llamada a la acción de alta prioridad. Estas combinaciones compiten o crean múltiples fuentes de verdad. Separa las visualizaciones de datos con explicación.

Anatomía

La captura de pantalla etiquetada debe identificar estas regiones:

1. Conclusión: una oración que enuncia el patrón sin la imagen.
2. Título de la figura: una descripción neutral de la medida, población y período.
3. Gráfico: la región donde la posición, longitud o dirección codifica los valores.
4. Ejes y escalas: etiquetas visibles, unidades, marcas, intervalos y línea base.
5. Etiquetas de series: etiquetas directas cuando sea posible; de lo contrario, una leyenda que no dependa solo del color.
6. Anotación: una nota opcional vinculada a un punto de datos, nunca un sustituto de la metodología.
7. Alternativa de datos: una tabla o texto ordenado que contenga los valores graficados.
8. Leyenda y fuente: alcance, procedencia, período de reporte y cualquier nota de cálculo.

Ejemplos de diseño

Cada variante usa marcas bidimensionales, unidades visibles, una conclusión, datos fuente y una alternativa accesible. No existe variante 3D, de pictograma, de indicador (gauge) ni de doble eje, porque la decoración y las escalas en competencia distorsionan la comparación.

Gráfico de líneas: úsalo para valores medidos en intervalos ordenados consistentes, generalmente tiempo. Las observaciones faltantes deben aparecer como vacíos en lugar de conexiones inventadas. Más de cuatro series normalmente requiere dividir el gráfico o elegir una tabla.

Gráfico de barras: úsalo para comparación o clasificación entre categorías discretas. Inicia el eje cuantitativo en cero porque la longitud de la barra representa magnitud. Prefiere barras horizontales cuando las etiquetas son largas y ordénalas por valor a menos que un orden natural tenga significado.

Diagrama de dispersión: úsalo para la relación entre dos variables cuantitativas. Muestra observaciones individuales, nombra ambas medidas, divulga cualquier línea de tendencia ajustada y evita lenguaje causal a menos que el diseño de investigación lo respalde.

Gráfico de barras apiladas: úsalo cuando tanto el total como la composición importan en un número pequeño de grupos. Mantén estable el orden de los segmentos y limita la pila a cuatro categorías. Si los lectores necesitan principalmente comparar cada componente, usa barras agrupadas o pequeños múltiplos en su lugar.

Parámetros

“Fuente” a continuación significa la ubicación de autoría desde la cual el renderizador obtiene el campo, no el proveedor de evidencia citado por el gráfico.

show-data=false solo está permitido cuando una tabla de datos equivalente o una alternativa textual completa valor por valor ya está asociada programáticamente con la figura. Nunca es una licencia para publicar un gráfico puramente visual.

Sintaxis y ejemplos de código

Las tres notaciones preservan el mismo título, conclusión, conjunto de datos, escala, fuente, período y texto alternativo. Las figuras son ilustrativas.

Directiva Markdown portátil

:::chart-block{type=bar y-label="Solicitudes" y-min=0 source="Conjunto de datos editorial ilustrativo" period="2026 T1–T4" alt="Las solicitudes disminuyen en cada trimestre, de 120 en el T1 a 72 en el T4."}
## Solicitudes de soporte ilustrativas por trimestre

Conclusión: Las solicitudes disminuyen cada trimestre, de 120 en el T1 a 72 en el T4.

| Trimestre | Solicitudes |
|---:|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
:::

El primer encabezado se asigna a title; la conclusión y la tabla de datos canónica se asignan a los campos del cuerpo.

Shortcode de Hugo

El adaptador de Hugo usa parámetros con nombre y deriva el elemento visual y la tabla de un conjunto de datos del cuerpo. Esta notación especifica la asignación prevista.

{{< chart-block type="bar" yLabel="Solicitudes" yMin="0" source="Conjunto de datos editorial ilustrativo" period="2026 T1–T4" alt="Las solicitudes disminuyen en cada trimestre, de 120 en el T1 a 72 en el T4." >}}
## Solicitudes de soporte ilustrativas por trimestre

Conclusión: Las solicitudes disminuyen cada trimestre, de 120 en el T1 a 72 en el T4.

| Trimestre | Solicitudes |
|---:|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
{{< /chart-block >}}

Bloque de WordPress

<!-- wp:amicited/chart-block {"type":"bar","title":"Solicitudes de soporte ilustrativas por trimestre","yLabel":"Solicitudes","yMin":0,"source":"Conjunto de datos editorial ilustrativo","period":"2026 T1–T4","alt":"Las solicitudes disminuyen en cada trimestre, de 120 en el T1 a 72 en el T4.","takeaway":"Las solicitudes disminuyen cada trimestre, de 120 en el T1 a 72 en el T4."} -->
<table><thead><tr><th>Trimestre</th><th>Solicitudes</th></tr></thead><tbody><tr><th>T1</th><td>120</td></tr><tr><th>T2</th><td>108</td></tr><tr><th>T3</th><td>84</td></tr><tr><th>T4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

El bloque puede renderizar SVG o canvas, pero la salida guardada y renderizada en el servidor debe retener la conclusión y la tabla. JavaScript puede mejorar la interacción, nunca proporcionar las únicas etiquetas o valores.

Ejemplos

Bueno: lo visual y las palabras cuentan la misma historia acotada

Conclusión: En el conjunto de datos ilustrativo, el tiempo de resolución mediano cae de 18 horas en enero a 12 horas en abril; el gráfico no establece por qué.

El gráfico de líneas usa intervalos mensuales uniformes y un eje etiquetado de “Horas” de 10 a 20. Esta escala de líneas no cero divulgada es apropiada porque la posición, no la longitud de la barra, codifica los valores. La tabla expone cada punto, y el texto no atribuye la disminución a una intervención.

Malo: el gráfico fabrica urgencia

Un gráfico de barras titulado “El tiempo de resolución colapsa después del lanzamiento” muestra los mismos valores de 18, 17, 14 y 12 horas en un eje que comienza en 11.5. Las barras parecen encogerse casi hasta desaparecer. Enero se etiqueta como “antes”, abril como “después”, los meses intermedios se ocultan detrás de un hover, y no se muestra ni la fecha de la intervención ni una fuente. El color rojo a verde proporciona el único significado de rendimiento.

Esto falla porque las barras requieren una línea base cero, el título afirma causalidad y las etiquetas selectivas impiden la verificación. Los valores solo en hover excluyen contextos de teclado, táctil, extracción y tecnología de asistencia. Repáralo con una línea base cero o una escala de líneas claramente definida, cada observación, fuente, período, tabla de datos y una conclusión no causal.

Marcado Schema y accesibilidad

Schema.org no tiene un tipo general Chart o Graph. Un gráfico sigue siendo evidencia dentro de una entidad elegible a nivel de página como Article, Report o Dataset. La investigación puede describir un conjunto de datos real descargable con propiedades como cobertura temporal, variables, creador y distribución. Nunca inventes una propiedad de conjunto de datos, calificación, tendencia o resultado solo porque exista un gráfico.

La accesibilidad requiere más que texto alternativo. Asigna a la figura un título y una leyenda, y al SVG un nombre y una descripción accesibles. Canvas necesita una representación DOM equivalente. Proporciona los valores graficados en una tabla con encabezados reales, y mantén la conclusión fuera del gráfico para que sobreviva a la impresión, extracción y fallo de imagen.

No uses el color como único identificador de serie; añade etiquetas directas, patrones de línea, formas de puntos o texto. Los tooltips deben ser alcanzables con teclado, descartables y complementarios. Con zoom al 200 % y anchos estrechos, reorganiza o desplaza una región etiquetada del gráfico sin crear desplazamiento a nivel de página.

Respeta las preferencias de movimiento reducido y evita dibujos animados o transiciones automáticas. Si los filtros cambian los datos, anuncia el estado y muestra los filtros activos en texto. Un gráfico estático no es un objetivo de teclado a menos que tenga controles reales.

Reglas de redacción

Estas reglas mantienen la autoridad visual del gráfico proporcional a su evidencia:

• Escribe una conclusión de 15 a 35 palabras. Nombra la dirección o relación, los puntos finales relevantes, la población y el período cuando eviten ambigüedad.
• Usa de 2 a 20 puntos por serie y no más de cuatro series. Divide trabajos más densos en pequeños múltiplos, una tabla o un conjunto de datos descargable.
• Mantén los títulos entre 5 y 16 palabras y las etiquetas entre 1 y 6 palabras. Los títulos describen; las conclusiones concluyen.
• Usa la misma unidad y definición de medida en toda una serie. Si un método cambia, interrumpe la línea y explica la discontinuidad.
• Inicia los ejes cuantitativos de barras y barras apiladas en cero. Una escala de líneas o dispersión puede ser más estrecha solo cuando los límites y las unidades permanezcan visibles y la elección no exagere el ruido.
• Usa un espaciado visual igual para intervalos numéricos o de tiempo iguales. No espacies febrero y diciembre como si fueran meses adyacentes cuando faltan períodos intermedios.
• Muestra los valores faltantes como faltantes. Nunca los conviertas a cero, los conectes en silencio o interpoles sin un método declarado.
• Etiqueta directamente las proyecciones, estimaciones, valores modelados y valores ajustados estacionalmente. No los estilices como datos observados.
• Evita ejes dobles, efectos 3D, perspectiva, escalado pictórico de áreas, ejes rotos, paletas de arcoíris y curvas suavizadas que impliquen valores no medidos.
• Indica la fuente, el período de cobertura, la muestra o cohorte cuando sea relevante, y cualquier transformación como indexación, normalización o media móvil.
• Nunca coloques una llamada a la acción, testimonio, insignia promocional, afirmación causal no respaldada o advertencia esencial solo dentro de la imagen.
• Deriva el gráfico y su tabla de un conjunto de datos canónico. Si los valores cambian, actualiza una vez y regenera ambas salidas.

La metodología detallada y las citas pueden continuar en un bloque de fuentes cercano, pero el gráfico aún necesita una fuente visible y un período propios.

Tipos de publicación que lo usan

El campo postTypes del frontmatter define las relaciones aprobadas a continuación. La inclusión permite un gráfico cuando existe un patrón cuantitativo real; no exige que los autores fabriquen un gráfico para cada página.

Lista de verificación de control de calidad

• La tarea principal del lector es ver un patrón; la consulta exacta sola sería mejor atendida por una tabla.
• La conclusión es una oración completa en texto HTML, coincide con los datos graficados y se mantiene dentro de la evidencia.
• El título nombra la medida, población y período necesarios para entender la figura.
• El tipo de gráfico coincide con la tarea analítica: secuencia, comparación de categorías, distribución o relación.
• Las líneas base de las barras comienzan en cero; cualquier otra escala es visible, justificada y no engañosa.
• Los intervalos, unidades, denominadores, cálculos y valores faltantes se representan honestamente.
• Las series están etiquetadas directamente o son distinguibles sin depender solo del color.
• Cada valor esencial está disponible sin hover, JavaScript, animación ni interpretación de imagen.
• Una tabla de datos o alternativa textual completa usa encabezados reales y coincide exactamente con lo visual.
• La fuente, el período de cobertura, la cohorte o muestra, y las transformaciones son visibles junto al gráfico.
• El gráfico y la alternativa accesible derivan de un conjunto de datos canónico.
• El bloque no está junto a una visualización de datos duplicada, módulo de conversión o elemento visual competidor de alta prioridad.
• El gráfico funciona con entrada de teclado, configuraciones de alto contraste, zoom al 200 %, pantallas estrechas y movimiento reducido.
• No queda efecto 3D, eje doble, eje roto, escalado pictórico, afirmación causal no respaldada ni serie decorativa.
• Cualquier dato estructurado a nivel de página es elegible y coherente con la evidencia visible.
• El tipo de publicación seleccionado incluye el bloque de gráfico en su contrato de contenido.

Preguntas frecuentes

¿Cuándo debo usar un gráfico en lugar de una tabla?

Usa un gráfico cuando la primera tarea sea ver una tendencia, distribución, clasificación o relación. Usa una tabla cuando los lectores necesiten consulta precisa entre muchos campos. Cuando ambas tareas importan, mantén una tabla compacta dentro del bloque de gráfico como su alternativa de datos accesible.

¿Un gráfico de barras debe comenzar en cero?

Sí. La longitud de la barra representa magnitud desde una línea base, por lo que recortar esa línea base cambia la proporción aparente. Un gráfico de líneas puede usar una escala no cero cuando el rango visible y las unidades sean explícitos y la vista más estrecha sea analíticamente necesaria.

¿El texto alternativo es suficiente para hacer accesible un gráfico?

Generalmente no. El texto alternativo debe identificar la visualización y resumir su patrón principal. Un gráfico con múltiples valores también necesita una tabla de datos cercana o texto equivalente que contenga las etiquetas, valores, unidades, fuente y período.

¿Puede la conclusión aparecer solo en el título del gráfico?

No. Un título identifica lo que muestra la figura; una conclusión indica lo que el lector debe notar. Mantén la conclusión como una oración completa fuera del gráfico para que permanezca disponible cuando la imagen no se perciba o extraiga.

¿Un bloque de gráfico genera marcado Schema.org?

No. Usa marcado válido a nivel de página como Article, Report o Dataset solo cuando la página califique de forma independiente. El gráfico no crea un nuevo derecho de esquema ni justifica afirmaciones estructuradas que estén ausentes de la evidencia visible.