♿

Accesibilidad e Inclusividad (WCAG)

"Diseñar para la accesibilidad mejora la experiencia de todos." Daltonismo, contraste WCAG 2.1, el problema del traffic light, alt text, tab order y diseño inclusivo en Power BI

Intermedio
🌍

¿Por qué accesibilidad en dashboards?

No es un "extra" — mejora la experiencia de absolutamente todas las personas

El 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de daltonismo. El 15% de la población mundial tiene alguna forma de discapacidad. Y el 100% de las personas se benefician de un diseño claro, legible y con buen contraste.

Diseñar para la accesibilidad no es hacer un dashboard diferente para personas con discapacidad — es hacer un dashboard mejor para todo el mundo. Un texto con buen contraste se lee mejor en todas las pantallas. Un gráfico que no depende solo del color se entiende en todas las situaciones: pantalla de portátil, proyector en una sala iluminada, impresión en blanco y negro.

"Diseñar para la accesibilidad mejora la experiencia de todos."

— Kawaii BI

💡 Tip kawaii: La accesibilidad no es caridad — es profesionalidad. Un informe Power BI accesible es un informe que funciona para tu CEO con daltonismo, tu jefa de operaciones que usa lector de pantalla, y el becario que está viendo el dashboard en un monitor antiguo con poco contraste.
👁️

Daltonismo: no uses solo color para comunicar

Lo que tú ves no es lo que todos ven

El daltonismo (o deficiencia en la visión del color) afecta a cómo una persona distingue ciertos colores. La forma más común es la deuteranomalía (dificultad para distinguir rojo de verde), que afecta a aproximadamente el 6% de la población masculina.

Esto significa que si tu dashboard usa rojo y verde como únicos indicadores de bueno/malo, aproximadamente 1 de cada 12 hombres de tu audiencia no puede leerlo correctamente.

Cómo ven tus gráficos las personas con daltonismo

Visión normal

Rojo y verde claramente distintos

Deuteranomalía

Rojo y verde casi indistinguibles

✗
✓
✗
✓
✗

✅ Con iconos

Distinguible independientemente del color

La regla fundamental

Nunca uses el color como único canal de información. Siempre acompáñalo con un segundo canal visual que no dependa del color:

  • Iconos o formas: ✗ para negativo, ✓ para positivo, ▲ para subida, ▼ para bajada
  • Patrones o texturas: Rayas, puntos o líneas discontinuas como alternativa al color de relleno
  • Texto explícito: Etiquetas "Cumple" / "No cumple" junto al indicador de color
  • Posición: Los valores negativos pueden estar a la izquierda y los positivos a la derecha, además del color
📌 Buena práctica en Power BI: Cuando uses formato condicional con colores, activa simultáneamente los iconos condicionales (Format visual → Visual → Cell elements → Icons). Power BI permite mostrar color + icono a la vez — usa ambos siempre.
🚦

El problema del traffic light

El semáforo sin iconos es invisible para muchas personas

El patrón "semáforo" (rojo-ámbar-verde) es uno de los más usados en dashboards corporativos para indicar el estado de KPIs. El problema: sin formas adicionales, las personas con daltonismo rojo-verde ven los tres colores como variaciones de un mismo tono — y pierden completamente la información de estado.

❌ Sin iconos

Solo depende del color. 1 de cada 12 hombres no distingue rojo de verde.

✅ Con iconos

✗
!
✓

Color + forma. Distinguible por todas las personas independientemente de la visión del color.

💡 Tip kawaii: En Power BI, cuando uses un KPI visual con semáforo, añade una medida de texto auxiliar que muestre "OK" / "Alerta" / "Crítico" junto al color. Parece redundante para ti, pero es vital para las personas que no distinguen los colores.
🔲

Contraste WCAG 2.1

Verifica que el texto se lea contra su fondo

Las WCAG 2.1 (Web Content Accessibility Guidelines) definen ratios mínimos de contraste entre texto y fondo para garantizar la legibilidad. Aunque Power BI no es técnicamente una web, estos estándares aplican exactamente igual a los dashboards porque se ven en pantalla.

Nivel Ratio mínimo Aplica a Ejemplo
AA (mínimo) 4.5:1 Texto normal (< 18pt) Texto 5.9:1 ✓
AA (grande) 3:1 Texto grande (≥ 18pt o ≥ 14pt bold) Grande 4.5:1 ✓
AAA (ideal) 7:1 Máxima legibilidad, lectura prolongada Óptimo 10.5:1 ✓
Elementos gráficos 3:1 Iconos, bordes funcionales, líneas de gráfico Los bordes de los visuals y las líneas de los gráficos deben tener al menos 3:1 contra su fondo

Cómo verificar el contraste

  1. Abre WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
  2. Introduce el color de texto (ej: #333333) como Foreground Color
  3. Introduce el color de fondo (ej: #F5F5F5) como Background Color
  4. Verifica que pase al menos WCAG AA — idealmente AAA
  5. Repite para cada combinación de texto/fondo de tu informe
⚠️ Ojo con esto: Los colores que peor rendimiento dan en contraste son los colores claros sobre fondos claros: gris claro sobre blanco, amarillo sobre beige, rosa sobre blush. Si usas texto en color de acento (coral, azul…) sobre fondo claro, siempre verifica el contraste — a menudo necesita ser más oscuro de lo que parece.
⚡

Señales mixtas: cuando texto y color se contradicen

Texto y color deben coincidir — siempre

Las señales mixtas ocurren cuando el color de un elemento dice una cosa y el texto dice otra. El cerebro recibe dos mensajes contradictorios y no sabe cuál priorizar. Esto se llama efecto Stroop — y es uno de los errores de usabilidad más frustrantes que existen.

❌ Señales mixtas

  • Cerrado — texto negativo en color positivo
  • Aprobado — texto positivo en color de alerta
  • -15% ▼ — descenso pintado en verde
  • KPI en rojo pero sin contexto de si rojo es bueno o malo

✅ Señales coherentes

  • ✗ Cerrado — texto, color e icono coinciden
  • ✓ Aprobado — todo dice "positivo"
  • -15% ▼ — descenso en rojo con flecha
  • KPI con leyenda: "Rojo = por debajo del objetivo"
📌 Buena práctica: Antes de publicar, revisa cada indicador de color de tu informe preguntándote: "Si tapo el color y solo leo el texto, ¿dice lo mismo?" Si no coinciden, arréglalo. Y si un color tiene un significado que no es obvio, añade una leyenda visible en la propia página.
⌨️

Tab order y navegación por teclado

Orden lógico de tabulación en Power BI

Las personas que usan lector de pantalla o navegan con teclado (sin ratón) recorren los visuals de un informe Power BI en un orden determinado: el tab order. Por defecto, Power BI asigna el tab order en el orden en que creaste los visuals — que casi nunca coincide con el orden lógico de lectura.

Cómo configurar el tab order en Power BI Desktop

  1. Ve a View → Selection pane (panel de selección)
  2. Haz clic en el icono de Tab order (la pestaña con números)
  3. Arrastra los elementos para que sigan el orden lógico de lectura:
    • Título de la página primero
    • Slicers y filtros después
    • KPIs principales a continuación
    • Gráficos de detalle
    • Navegación al final
  4. Oculta del tab order los elementos puramente decorativos (rectángulos de fondo, imágenes de adorno) haciendo clic en el icono del ojo junto a cada uno
⚠️ Ojo con esto: Si no configuras el tab order, un usuario con lector de pantalla podría llegar primero a un rectángulo decorativo de fondo, luego a un visual secundario y finalmente al KPI principal — un recorrido absurdo que lo único que genera es frustración y abandono.
💬

Alt text en visuals de Power BI

Describe qué muestra el visual, no cómo se ve

El texto alternativo (alt text) es la descripción que leen los lectores de pantalla cuando un usuario navega por un visual. Power BI permite añadir alt text estático (texto fijo) o dinámico (generado con una medida DAX) a cada visual.

Cómo añadir alt text en Power BI

  1. Selecciona el visual → Format visual → General → Accessibility
  2. En el campo Alt text, escribe una descripción del contenido (no del aspecto)
  3. Para alt text dinámico, haz clic en Fx y selecciona una medida DAX que genere la descripción automáticamente

Qué escribir y qué no escribir

❌ Alt text malo

  • "Gráfico de barras azul"
  • "Imagen de un gráfico"
  • "Gráfico 1"
  • Campo vacío (sin alt text)

✅ Alt text bueno

  • "Ventas mensuales 2025. Máximo en junio (€420K), mínimo en enero (€180K)"
  • "Distribución de clientes por región: Norte 42%, Sur 31%, Centro 27%"
  • "Tendencia de margen bruto: descenso del 28% al 23% entre Q1 y Q3 2025"
  • Medida DAX: genera el resumen del visual automáticamente con los datos actuales
💡 Tip kawaii: El alt text dinámico con DAX es la joya oculta de la accesibilidad en Power BI. Crea una medida como _AltText_Ventas = "Ventas totales: " & FORMAT([Total Ventas], "€#,0") y úsala como alt text del visual. Así la descripción se actualiza automáticamente con los datos filtrados.
✅

Checklist de accesibilidad para Power BI

Antes de publicar, verifica estos 14 puntos

  • El color nunca es el único canal de información — siempre va acompañado de icono, forma o texto
  • Los indicadores tipo semáforo (rojo/ámbar/verde) incluyen iconos o texto además del color
  • El contraste texto/fondo cumple WCAG AA como mínimo (ratio 4.5:1 para texto normal)
  • No se usa negro puro (#000) ni blanco puro (#FFF) en superficies grandes
  • Texto y color siempre coinciden en significado (no "Cerrado" en verde)
  • Todos los visuals tienen alt text descriptivo (estático o dinámico con DAX)
  • Los elementos decorativos (rectángulos de fondo, líneas) están ocultos del tab order
  • El tab order sigue el orden lógico de lectura (título → filtros → KPIs → detalle → navegación)
  • Los títulos de los visuals son descriptivos ("Ventas por región, 2025" en lugar de "Gráfico 1")
  • Los tooltips proporcionan contexto adicional útil, no solo repiten el valor
  • No hay texto en vertical ni en diagonal (fatiga visual y problemas de lectura)
  • Las tablas tienen encabezados de columna claros y descriptivos
  • Los botones de navegación tienen texto visible además del icono
  • Se ha verificado el informe con el simulador de daltonismo (Windows: Filtros de color en Accesibilidad)
🚀 ¡Lo estás haciendo genial! La accesibilidad no es una funcionalidad extra que se añade al final — es una forma de pensar que permea cada decisión de diseño. Cuando diseñas para las personas con más dificultades, diseñas mejor para todas. Y eso es exactamente lo que significa UX inclusiva. 🌸