Guía técnica completa para implementar accesibilidad web según WCAG 2.1: semántica HTML, ARIA, navegación por teclado, contraste de color, lectores de pantalla y auditoría automatizada.
Cuándo usarlo: Implementar accesibilidad web según WCAG 2.1 en aplicaciones con auditoría y testing incluidos
Herramienta recomendada: Claude
Actúa como un ingeniero front-end especializado en accesibilidad web (a11y) con experiencia auditando y remediando aplicaciones web según los estándares WCAG 2.1 y 2.2. Quiero implementar accesibilidad correctamente en mi aplicación web y necesito una guía técnica que vaya más allá de los checklist superficiales. Para contextualizar, hazme estas preguntas: - ¿Cuál es el stack tecnológico de la aplicación (React, Vue, Angular, HTML vanilla, otro)? - ¿Tenemos ya alguna auditoría de accesibilidad hecha, o empezamos desde cero? - ¿Cuál es el nivel de conformidad que necesitamos alcanzar (WCAG 2.1 AA es el estándar más común)? - ¿Hay requisitos legales de accesibilidad que debemos cumplir (directiva europea de accesibilidad, ADA)? Con esas respuestas, guíame por: MÓDULO 1: Fundamentos de accesibilidad técnica Antes de implementar, hay que entender el modelo: - Los cuatro principios WCAG (perceptible, operable, comprensible, robusto) y qué significa cada uno en la práctica - La diferencia entre conformidad A, AA y AAA: cuál es el objetivo realista para la mayoría de aplicaciones - Cómo piensan los usuarios de tecnologías asistivas: lectores de pantalla, navegación por teclado, ampliación de pantalla, control por voz - Los errores de accesibilidad más comunes y más fáciles de corregir (alto impacto, bajo esfuerzo) - La diferencia entre accesibilidad técnica y accesibilidad real: por qué pasar el validador automático no es suficiente MÓDULO 2: HTML semántico y estructura de la página La semántica correcta es la base de todo lo demás: - Uso correcto de los elementos HTML5 de landmark (header, nav, main, aside, footer) y por qué importan para los lectores de pantalla - Jerarquía de encabezados (h1-h6): el error más común y cómo corregirlo - Tablas de datos accesibles: caption, scope, headers, resumen - Formularios accesibles: label, fieldset, legend, mensajes de error asociados, grupos de campos relacionados - Listas semánticas para contenido que es realmente una lista MÓDULO 3: ARIA cuando el HTML no es suficiente ARIA bien usado ayuda; ARIA mal usado daña: - El primer principio de ARIA: no usar ARIA cuando hay un elemento HTML nativo equivalente - Los roles, propiedades y estados ARIA más importantes: role, aria-label, aria-labelledby, aria-describedby, aria-expanded, aria-hidden, aria-live - Patrones de ARIA para componentes complejos: modal, tabs, accordeon, combobox, tooltip - Por qué aria-hidden="true" puede destruir la experiencia de usuarios de lector de pantalla si se usa mal - Cómo validar que el ARIA que añado realmente mejora la experiencia (probar con lector de pantalla real) MÓDULO 4: Navegación por teclado e interactividad Todo lo que se puede hacer con ratón debe poder hacerse con teclado: - Focus management: qué es, por qué importa y cómo gestionarlo en aplicaciones de una sola página - El orden del foco: cómo el tabindex puede ayudar o destruir la navegación por teclado - Cómo implementar Skip links para que los usuarios de teclado puedan saltar la navegación - Trampas de foco en modales y dialogs: cómo implementarlas correctamente - Atajos de teclado personalizados: cuándo usarlos y cómo documentarlos para el usuario MÓDULO 5: Colores, contraste y presentación visual Lo que no se ve con claridad no es accesible: - Ratios de contraste WCAG AA: 4.5:1 para texto normal, 3:1 para texto grande y componentes de UI - Cómo verificar el contraste con herramientas (WebAIM Contrast Checker, las DevTools de Chrome) - No solo contraste: cómo no depender solo del color para transmitir información - Texto redimensionable: cómo garantizar que el texto se puede ampliar hasta 200% sin pérdida de contenido - Espaciado de texto: los requisitos de WCAG 1.4.12 y cómo implementarlos MÓDULO 6: Auditoría y testing de accesibilidad La accesibilidad que no se testea no se mantiene: - Herramientas de auditoría automatizada: axe, Lighthouse, WAVE, IBM Equal Access Checker - Cómo integrar la auditoría de accesibilidad en el pipeline de CI/CD con axe-core - Cómo testear con lectores de pantalla reales: NVDA (Windows), JAWS (Windows), VoiceOver (Mac/iOS) - Cómo hacer testing manual de navegación por teclado paso a paso - Cómo priorizar y gestionar un backlog de issues de accesibilidad en el equipo de desarrollo Termina con un checklist técnico de 25 puntos para revisar la accesibilidad de cualquier componente nuevo antes de hacer merge, organizado por categoría y con el nivel WCAG de cada criterio.