El año pasado hice una auditoría de accesibilidad en 200 paneles de datos. Los resultados fueron reveladores: el 94 % tenía al menos un problema crítico de accesibilidad.
¿El problema más común? Codificación solo por color. Gráficos completamente ilegibles para los 300 millones de personas en el mundo con deficiencia en la visión del color.
Arreglémoslo.
Por qué importa la accesibilidad en gráficos
Más allá del imperativo ético, hay un argumento de negocio:
- Alrededor del 15 % de la población mundial tiene alguna forma de discapacidad
- El daltonismo afecta a ~8 % de hombres y ~0,5 % de mujeres
- El diseño accesible suele mejorar la usabilidad para todos
Y cada vez es ley. La conformidad WCAG es obligatoria en sitios gubernamentales y muchas empresas.
Los cuatro pilares de la accesibilidad en gráficos
1. Independencia del color
La regla: nunca uses el color como única forma de transmitir información.
Mal: Un gráfico de líneas con rojo para "ventas" y verde para "beneficio" sin otra diferenciación.
Bien: El mismo gráfico, pero ventas con línea sólida y beneficio con línea discontinua. O distintas formas de marcador. O etiquetas directas.
Ajustes prácticos:
- Añadir patrones o texturas en áreas rellenas
- Usar distintos estilos de línea (sólida, discontinua, punteada)
- Incluir etiquetas directas en los puntos de datos
- Usar formas en puntos de dispersión
- Añadir una leyenda clara que no dependa del color
Consejos de paleta:
- Usar una paleta segura para daltónicos (por ejemplo ColorBrewer)
- Asegurar contraste suficiente entre colores adyacentes
- Probar con un simulador de daltonismo (Chrome DevTools incluye uno)
2. Soporte para lectores de pantalla
Los gráficos son inherentemente visuales. Hacer que funcionen con lectores de pantalla requiere esfuerzo intencional.
Elementos esenciales:
- Texto alternativo que describa el mensaje clave del gráfico, no solo su estructura
- Tablas de datos como representación alternativa
- Jerarquía de encabezados adecuada alrededor del gráfico
- Etiquetas ARIA para elementos interactivos
Escribir buen texto alternativo:
Mal: "Un gráfico de barras con datos de ventas"
Bien: "Gráfico de barras de ventas Q3 2025 por región. La región occidental lidera con 2,3 M$, seguida de Oriental 1,8 M$, Central 1,4 M$, Sur 0,9 M$."
El texto alternativo debe responder: ¿Qué necesitaría saber alguien que no pudiera ver este gráfico?
Para gráficos complejos, ofrecer una tabla de datos alternativa. Envolver la imagen del gráfico en un elemento figure con texto alternativo descriptivo e incluir una sección details desplegable con la tabla de datos subyacente.
3. Navegación por teclado
Los gráficos interactivos deben ser accesibles por teclado.
Requisitos:
- Todos los elementos interactivos alcanzables con Tab
- Indicadores de foco claros
- Orden de tabulación lógico
- Atajos de teclado para acciones comunes (documentados)
En paneles interactivos complejos:
- Ofrecer una forma de saltar el gráfico
- Permitir que los usuarios de teclado accedan a la misma información que los de ratón
- Incluir una forma de pausar datos que se actualicen solos
Prueba: Desconecta el ratón e intenta usar tu gráfico solo con teclado. ¿Puedes acceder a toda la información?
4. Accesibilidad cognitiva
No todos los problemas de accesibilidad son sensoriales. La carga cognitiva también importa.
Directrices:
- Mantener los gráficos simples; un mensaje principal por gráfico
- Evitar jerga en etiquetas y anotaciones
- Usar formato consistente en todo el panel
- Proporcionar contexto y explicaciones
- Evitar animaciones que se reproduzcan solas
La prueba de 5 segundos: ¿Alguien puede entender la idea principal de tu gráfico en 5 segundos? Si no, simplifica.
Tipos de gráficos comunes y sus retos
Gráficos de torta
- Problema: Segmentos solo por color
- Solución: Añadir patrones, etiquetas en los segmentos o leyenda clara con valores
Gráficos de líneas
- Problema: Varias líneas diferenciadas solo por color
- Solución: Distintos estilos de línea, etiquetas directas o estados al pasar el cursor
Gráficos de barras
- Problema: Poco contraste entre barras y fondo
- Solución: Contraste mínimo 3:1, añadir bordes a las barras si hace falta
Mapas de calor
- Problema: Los gradientes de color no significan nada sin visión
- Solución: Valores numéricos en celdas, ofrecer tabla de datos alternativa
Gráficos de dispersión
- Problema: Puntos superpuestos, categorías solo por color
- Solución: Distintas formas de marcador, opacidad ajustable, tabla de datos
Probar tus gráficos
Pruebas automatizadas
- axe DevTools para accesibilidad general
- WAVE para comprobaciones visuales rápidas
- Auditoría de accesibilidad de Lighthouse
Pruebas manuales
- Simuladores de daltonismo (Sim Daltonism, Chrome DevTools)
- Lectores de pantalla (NVDA, VoiceOver, JAWS)
- Navegación solo con teclado
- Zoom al 200 % (¿el gráfico sigue funcionando?)
Pruebas con usuarios
- Incluir a personas con discapacidad en tu investigación
- No asumir; preguntar por problemas reales
Mejoras rápidas que puedes aplicar hoy
- Añadir texto alternativo a cada gráfico (describir la conclusión, no solo el tipo)
- Incluir una tabla de datos alternativa
- Comprobar contraste de color (mínimo 3:1 para gráficos)
- Probar con un simulador de daltonismo
- Verificar que la navegación por teclado funcione
- Añadir indicadores de foco visibles
Herramientas que ayudan
ChartGen y otras herramientas modernas empiezan a incluir funciones de accesibilidad por defecto. Busca:
- Sugerencias de texto alternativo integradas
- Opciones de paleta segura para daltónicos
- Superposiciones de patrones automáticas
- Generación de tablas de datos
Pero las herramientas no son magia. Sigue haciendo falta revisar y adaptar a tu contexto.
Impacto en el negocio
Un consultor de accesibilidad contó: Una empresa de servicios financieros corrigió problemas de accesibilidad en su panel para inversores. ¿Resultado? Un 23 % más de engagement en todos los usuarios, no solo en personas con discapacidad.
El diseño accesible suele ser simplemente mejor diseño.
Recursos
- Directrices WCAG 2.1 (en particular 1.4.1 Uso del color y 1.1.1 Contenido no textual)
- Proyecto Chartability para orientación específica de gráficos
- A11y Style Guide para patrones de componentes
- Herramientas de simulación de daltonismo
Reflexión final
No construirías un edificio sin rampa. ¿Por qué construir un panel sin accesibilidad?
El esfuerzo para hacer los gráficos accesibles es moderado. El impacto es grande. Empieza por un gráfico, aplica estos principios y amplía desde ahí.