Marco de trabajo para diseñar productos digitales que sean accesibles y representativos para todas las personas. Cubre los estándares WCAG, el diseño para diversidad funcional, la representación en interfaces y cómo integrar la accesibilidad en el proceso de diseño desde el inicio.
Cuándo usarlo: Integración de accesibilidad y representación inclusiva en el proceso de diseño de productos digitales
Herramienta recomendada: Claude
Actúa como un diseñador UX especializado en diseño inclusivo y accesibilidad digital. Necesito tu ayuda para integrar los principios de diseño inclusivo en nuestro proceso de producto desde el principio, dejando de tratar la accesibilidad como un añadido final y convirtiéndola en una práctica central del equipo de diseño. **Situación actual:** Nuestro equipo de diseño crea productos digitales (web y app móvil) sin ningún proceso formal de revisión de accesibilidad. Cuando llega la fase de QA, se detectan problemas de contraste, componentes no navegables con teclado y falta de alternativas de texto para imágenes. Estos problemas se corrigen de forma reactiva, con alto coste de tiempo y generando deuda técnica. Además, la representación de personas con diversidad funcional, diferente etnia o edad avanzada es prácticamente nula en nuestras interfaces. **Pilar 1 – Fundamentos de accesibilidad WCAG en diseño:** Las Web Content Accessibility Guidelines (WCAG) 2.1 nivel AA son el estándar internacional de accesibilidad y son obligatorias para entidades públicas en España según el RD 1112/2018. Explica los 4 principios WCAG (Perceptible, Operable, Comprensible, Robusto) y tradúcelos a decisiones de diseño concretas: ratio de contraste mínimo entre texto y fondo (4.5:1 para texto normal, 3:1 para texto grande), tamaño mínimo de targets táctiles en móvil (44x44px recomendados por Apple y Google), gestión del foco de teclado (orden lógico, estilos de foco visibles nunca eliminados), alternativas de texto para elementos visuales (imágenes, iconos, gráficos), y diseño de formularios accesibles (labels vinculados, mensajes de error descriptivos, validación en tiempo real no agresiva). Define también las herramientas de verificación de accesibilidad que el diseñador debe usar antes de entregar a desarrollo (Figma A11y Annotation Kit, Color Contrast Checker, Stark plugin). **Pilar 2 – Diseño para diversidad funcional más allá del estándar mínimo:** El estándar mínimo de accesibilidad no es el objetivo; es el punto de partida. Diseña para la diversidad funcional real de la audiencia: usuarios con baja visión (tamaños de texto escalables sin pérdida de información, modo de alto contraste, zoom al 200% sin scroll horizontal), usuarios con daltonismo (no usar el color como único diferenciador, usar iconos o patrones adicionales), usuarios con movilidad reducida (navegación completa por teclado o switch access, áreas de clic generosas, no requerir gestos complejos), usuarios con dificultades cognitivas (lenguaje simple y claro, instrucciones paso a paso, tiempo suficiente para completar acciones), y usuarios con sordera (subtítulos en vídeos, no depender solo del audio para transmitir información). Para cada perfil proporciona 3 ejemplos de decisiones de diseño que mejoran la experiencia. **Pilar 3 – Representación en interfaces digitales:** Las interfaces de usuario transmiten valores culturales a través de las imágenes, ilustraciones e iconografía que utilizan. Define las guías de representación inclusiva para el sistema de diseño: ilustraciones de personas (diversidad de etnia, edad, cuerpo, capacidad y expresión de género en los personajes ilustrados), iconografía de personas y roles (evitar estereotipos de género en iconos de profesiones: médico, ingeniero, cuidador), avatares y placeholders (diseñar avatares neutros, no usar siluetas masculinas como genérico), y selección de fotografía de stock (criterios de diversidad en la búsqueda y selección de imágenes de personas). Diseña también el proceso de auditoría de representación del sistema de diseño existente. **Pilar 4 – Integración de la accesibilidad en el proceso de diseño:** La accesibilidad integrada desde el inicio cuesta entre 10 y 100 veces menos que corregirla al final del desarrollo. Diseña el proceso de diseño inclusivo por defecto: las revisiones de accesibilidad en cada etapa del diseño (diseño exploratório: ¿la solución es conceptualmente accesible? Diseño detallado: ¿cumplen los componentes los estándares WCAG? Entrega a desarrollo: ¿están documentadas todas las especificaciones de accesibilidad?), las anotaciones de accesibilidad en los ficheros de Figma que el diseñador debe incluir antes de la entrega (roles ARIA, orden de foco, texto alternativo, estados de componentes), y el proceso de testing de accesibilidad con usuarios reales con diversidad funcional. **Pilar 5 – Comunicación del valor del diseño inclusivo en la organización:** La accesibilidad y el diseño inclusivo con frecuencia se perciben como un costo adicional. Define la estrategia de comunicación interna para construir el caso de negocio: el argumento legal (obligaciones normativas y riesgo de sanción), el argumento de mercado (las personas con diversidad funcional representan el 15% de la población mundial con un poder adquisitivo estimado de 8 billones de dólares), el argumento de calidad (el diseño accesible mejora la experiencia para todos los usuarios: el "efecto bordillo"), y el argumento de reputación de marca. Diseña también la formación básica de accesibilidad de 2 horas para todo el equipo de producto. **Formato de entrega:** - Guía rápida de criterios WCAG 2.1 AA para diseñadores con ejemplos visuales - Checklist de revisión de accesibilidad por etapa del proceso de diseño - Guía de representación inclusiva para el sistema de diseño con ejemplos - Plantilla de anotaciones de accesibilidad para ficheros de Figma - Presentación de 10 diapositivas para construir el caso de negocio del diseño inclusivo