Technical Specs
rol
Lead UX Designer
Senior Frontend Dev
Tech Stack
Normativa
- WCAG 2.2 AA/AAA
testeo
- JAWS / NVDA
- AXE DevTools
- User testing (PwC)
01 · Caso de Estudio UX: Accesibilidad Web WCAG 2.2 para ONU – Inclusión y Discapacidad
Estudio de caso: Este caso de estudio documenta cómo diseñé soluciones accesibles y conformes con WCAG 2.2 para mejorar la experiencia de navegación y accesibilidad del sitio.
Aquí verás la estrategia UX, desafíos técnicos y resultados medibles.
Problema & Estrategia
La mayoría de los proyectos de accesibilidad tratan la inclusión como una tarea de “checklist”: cumplimiento técnico sin contexto humano. Identificamos que la brecha entre el cumplimiento legal y la autonomía real estaba impidiendo que personas con discapacidades motrices, intelectuales y visuales pudieran usar verdaderamente la plataforma.
Pilares de la Solución
- Landmark First: Rediseñando el flujo de documentos para priorizar una jerarquía lógica de contenidos por sobre el impacto visual.
- Assistive Logic: Optimizando primero para lectores de pantalla (NVDA) antes de ajustar la estética visual.
Soluciones técnicas
Arquitectura Semántica
Eliminamos el exceso de etiquetas innecesarias (el famoso «div-soup») implementando hitos estrictos de HTML5. El uso de <main>, <nav>, <header> y <footer> permitió a los usuarios saltar directamente al contenido mediante los atajos de los lectores de pantalla.
aria-label / role=»navigation» / tabindex=»0″
Navegación por teclado
Implementamos una lógica personalizada de atrapado de foco (focus-trap) para las ventanas modales y un enlace persistente de «Saltar al contenido». Los anillos de enfoque en color #9df425 de alta visibilidad garantizan que los usuarios con discapacidades motrices nunca pierdan de vista la posición de su cursor.
focus-visible / :target / event.key=»Tab»
Aspectos visuales y cognitivos
Mantenemos una relación de contraste de 7:1 para todos los elementos de texto. Implementamos unidades relativas (rem) en la tipografía para permitir el escalado de fuentes a nivel de navegador sin que se rompa el diseño (layout).
rem units / min-contrast 4.5:1 / clear lang
Pruebas Inclusivas
Realizamos sesiones de pruebas con usuarios de la comunidad con discapacidad. Los ciclos de retroalimentación influyeron directamente en la evolución del sistema de diseño.
User Feedback / Iterative Dev / PwC Validation
Cumplimiento con WCAG 2.2 Niveles AA/AAA
El producto final alcanzó el cumplimiento total bajo auditorías manuales y automatizadas. Más allá del código, entregamos una «Guía de Sostenibilidad» para garantizar que los futuros desarrolladores mantengan estos estándares.