El diseño que funciona para personas con distintas capacidades: contraste de color, tamaño de fuente, navegación con teclado y el proceso de incluir a usuarios con diversidad funcional en el diseño.
Cuándo usarlo: Integrar los principios de diseño accesible e inclusivo en el proceso de diseño de producto
Herramienta recomendada: Claude
Actúa como un diseñador de UX especializado en diseño accesible e inclusivo, con experiencia integrando los principios de accesibilidad en el proceso de diseño de productos digitales desde la fase de concepto. Voy a explorar contigo cómo construir una práctica de diseño accesible. Mi contexto: [describe tu situación: tipo de producto que diseñas, herramientas de diseño que usas (Figma, Sketch u otras) y el nivel actual de accesibilidad de tus diseños] Trabaja conmigo en profundidad en los siguientes bloques: **1. El diseño inclusivo como filosofía y como práctica** El diseño inclusivo no es una lista de requisitos técnicos: es una filosofía que parte de la premisa de que diseñar para los extremos de la distribución de usuarios mejora la experiencia para todos. Explícame los fundamentos del diseño inclusivo: el concepto del espectro de capacidades (las personas no son accesibles o no accesibles: todos experimentamos limitaciones temporales, situacionales o permanentes), el principio de "diseñar para los extremos beneficia al centro" con ejemplos concretos (el subtítulo que ayuda a personas sordas también ayuda a quien está en un entorno ruidoso), y los siete principios del diseño universal aplicados al diseño digital. **2. El color y el contraste: la accesibilidad visual** El contraste de color es el criterio de accesibilidad que más afecta a la mayoría de los usuarios y el que más fácilmente se puede mejorar desde el diseño. Explícame cómo aplicar el contraste correctamente: los ratios de contraste que exige WCAG AA (4.5:1 para texto normal, 3:1 para texto grande y elementos gráficos), cómo medir el contraste en Figma y en el navegador, el error de no usar el color como único medio de transmitir información (y cómo añadir texturas, iconos o etiquetas como canal alternativo), y el diseño para personas con daltonismo (los tipos más comunes, cómo simularlo en las herramientas de diseño y las paletas de color que funcionan para todos). **3. La tipografía accesible** Las decisiones tipográficas tienen un impacto enorme en la legibilidad para personas con dislexia, baja visión y otras condiciones. Explícame las decisiones de tipografía que mejoran la accesibilidad: el tamaño mínimo de texto en interfaces (16px como punto de partida para el cuerpo de texto), el interlineado y el espaciado entre letras que facilitan la lectura, las familias tipográficas que funcionan mejor para la legibilidad (y las que deben evitarse), el contraste entre texto y fondo en distintos contextos (texto sobre fotografía, texto sobre color) y el diseño que permite que el texto escale sin romper el layout cuando el usuario aumenta el tamaño de letra del sistema. **4. La accesibilidad de los componentes interactivos** Los componentes interactivos (botones, formularios, modales, tabs, dropdowns) son el área de mayor impacto en la accesibilidad de las aplicaciones. Explícame cómo diseñar componentes interactivos accesibles: los tamaños mínimos de área táctil para garantizar la usabilidad con motor fino reducido (44x44px como referencia), el diseño del foco visible que funciona para usuarios de teclado y sea reconocible en todos los estados del componente, el diseño de los estados del componente (hover, focus, active, disabled, error) que comunican el estado sin depender solo del color, y el diseño de los formularios accesibles (etiquetas visibles, mensajes de error contextuales, instrucciones claras). **5. Incluir a usuarios con diversidad funcional en el proceso de diseño** El diseño accesible más efectivo se crea con la participación de las personas a las que va dirigido. Explícame cómo integrar a usuarios con diversidad funcional en el proceso de diseño: los métodos de investigación que facilitan la participación de usuarios con distintas capacidades (entrevistas, tests de usabilidad), las adaptaciones del proceso de testing para usuarios con discapacidad visual (test con lectores de pantalla), cognitiva (tests con menor carga cognitiva) o motriz (tests con control por voz o teclado), y cómo diseñar el proceso de reclutamiento de participantes para incluir la diversidad de capacidades. **6. Las herramientas de accesibilidad en el flujo de trabajo del diseñador** El diseñador puede detectar y corregir la mayoría de los problemas de accesibilidad antes de que el código esté escrito. Explícame las herramientas que debo integrar en mi flujo de trabajo: los plugins de Figma para verificar el contraste de color (Contrast, A11y Annotation Kit), las herramientas para simular distintas condiciones visuales (daltonismo, baja visión), los plugins para anotar los diseños con información de accesibilidad que el equipo de desarrollo necesita (roles ARIA, orden de foco, textos alternativos), y el proceso de revisión de accesibilidad de los diseños que puedo integrar en el handoff con desarrollo. Quiero concreción: checklist de accesibilidad que puedo usar en mis revisiones de diseño y ejemplos visuales de antes/después de las mejoras de accesibilidad más comunes.