# Diseno Inclusivo Accesibilidad Universal Y Equidad Digital > El Diseño Inclusivo es la práctica de concebir productos digitales que pueden ser utilizados por cualquier persona, independientemente de sus capacidades físicas, cognitivas o sensoriales. No es solo "poner un modo de alto contraste"; es Ingeniería de la Universalidad Digital. Úsala para tareas de Generación de Contenido: inclusive-design, accessibility, wcag, universal-design, assistive-technology, neurodiversity. - Skill: `jesusgarciafernandez/diseno-inclusivo-accesibilidad-universal-y-equidad-digital` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add jesusgarciafernandez/diseno-inclusivo-accesibilidad-universal-y-equidad-digital` - Raw SKILL.md: https://api.skillmd.com/api/skills/jesusgarciafernandez/diseno-inclusivo-accesibilidad-universal-y-equidad-digital/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: CC BY-NC-SA 4.0 - Author: jesusgarciafernandez (https://skillmd.com/u/jesusgarciafernandez) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jesusgarciafernandez/diseno-inclusivo-accesibilidad-universal-y-equidad-digital --- ## 0. Filosofía Human-Centric AI *Esta habilidad abre las puertas del mundo digital a todos los seres humanos sin excepción, utilizando la tecnología para derribar las barreras de la capacidad y garantizar la igualdad de oportunidades.* **El Rol del Humano:** El Diseñador Inclusivo debe ser un "Garante de la Equidad". La IA puede verificar contrastes de color, generar textos alternativos para imágenes y auditar el código WCAG en milisegundos, pero solo el humano puede entender el contexto emocional de la exclusión, decidir qué metáfora visual es comprensible para todas las culturas y asegura que el producto final respete la diversidad de modelos mentales y capacidades físicas, tratando a cada usuario con la máxima dignidad. **Empoderamiento:** Usamos la tecnología para automatizar el control de calidad técnica de la accesibilidad, permitiendo que el experto se centre en la creación de experiencias universales que beneficien a los extremos y, por extensión, mejoren el uso para el 100% de la población. --- ## 1. Descripción Detallada El Diseño Inclusivo es la práctica de concebir productos digitales que pueden ser utilizados por cualquier persona, independientemente de sus capacidades físicas, cognitivas o sensoriales. No es solo "poner un modo de alto contraste"; es **Ingeniería de la Universalidad Digital**. El enfoque v2.0 incorpora la **Accesibilidad Nativa y el Diseño para la Neurodivergencia**, donde se aplican con rigor las pautas WCAG 2.2, se asegura la compatibilidad con tecnologías de asistencia (lectores de pantalla, controladores por voz) y se minimiza la carga cognitiva, garantizando una experiencia fluida, autónoma y sin barreras. ## 2. Escenarios de Aplicación - **Portales de Servicio Público y Administración:** Garantía de que cualquier ciudadano (mayores, personas con discapacidad, baja alfabetización) pueda realizar sus trámites sin ayuda. - **E-commerce y Marketplaces con Ambición Global:** Ampliación del mercado mediante el acceso universal a los productos y servicios. - **Interfaces para la Tercera Edad:** Adaptación de tamaños, contrastes y flujos lógicos para usuarios con pérdida sensorial o cognitiva leve. - **Plataformas Educativas Inclusivas:** Diseño de contenidos que respeten la neurodiversidad (dislexia, TDAH, espectro autista) mediante la claridad visual y textual. - **Auditoría y Corrección de App Existentes:** Identificación y eliminación de barreras críticas que impiden la navegación autónoma. ## 3. Requisitos de Implementación - **Maestría en Pautas WCAG 2.1 / 2.2:** Conocimiento profundo de los niveles A, AA y AAA aplicado a diseño y código. - **Dominio de Semántica y Atributos ARIA:** Capacidad de estructurar el código (HTML5) para que sea perfectamente interpretable por lectores de pantalla. - **Herramientas de Auditoría Técnica:** Uso experto de Stark (Figma), Axe DevTools (Navegador) y Lighthouse para verificación automática y manual. --- ## 4. Diferencial: Diseño Estándar vs. Diseño Inclusivo de Alta Densidad v2.0 | Dimensión | Enfoque "Usuario Promedio" | Diseño Universal (v2.0) | | :--- | :--- | :--- | | **Público** | Persona joven, sin limitaciones. | Diversidad total (Extremos del espectro). | | **Acceso** | Ratón / Teclado estándar. | Voz / Conmutadores / Lectores de pantalla. | | **Contraste** | Estético (gris sobre blanco). | Funcional y Accesible (Ratio 4.5:1 mín.). | | **Mentalidad** | La accesibilidad es "un extra". | La inclusión es el motor del diseño (Shift-left). | --- ## 5. Instrucciones y Pasos Detallados (Protocolo Maestro) ### Fase 1: Auditoría de Sesgos y Diseño de Fundaciones Accesibles **Objetivo:** Identificar a quién estamos dejando fuera y corregir los cimientos. 1. **Mapa de Exclusión:** Identifica perfiles de usuario que tendrían dificultades con el diseño actual (Ej: Personas con visión reducida, usuarios con manos ocupadas, personas con ansiedad). 2. **Configuración de Tokens Acccesibles:** Define paletas de color con contraste certificado y tipografías con glifos claros. **Prompt Maestro de Dirección de Diseño Inclusivo:** ```text Actúa como Consultor Jefe de Accesibilidad (A11y) y Diseñador Inclusivo Senior. Para el producto [PRODUCTO], realiza el siguiente plan de equidad digital: 1. Audita el sistema de color actual y propone una 'Paleta Certificada AA' para todos los elementos críticos de la interfaz. 2. Diseña la 'Jerarquía Semántica' para lectores de pantalla: Títulos (H1-H6), Alt-text para imágenes y etiquetas ARIA descriptivas. 3. Establece las reglas de 'Focus State': Cómo se ve y se comporta el foco al navegar con teclado para usuarios con discapacidad motora. 4. Crea la guía de 'UX Writing para Neurodiversidad': Frases cortas, instrucciones claras y evitación de jerga confusa. 5. Protocolo de Validación: Describe cómo realizaremos un test de usuario real con una persona que use tecnologías de asistencia [TIPO_TECNOLOGÍA]. ``` ### Fase 2: Implementación Técnica, Verificación Semántica y Documentación ... (Expansión técnica sobre el uso de la propiedad 'Reduced Motion' en CSS, la verificación del orden de tabulación y la creación de una librería de componentes 'A11y-Ready' documentada para el equipo de IT) ... --- ## Referencia ampliada Para ejemplos extendidos, métricas y notas, consulta [`reference.md`](reference.md) (cárgalo solo cuando necesites ese detalle).