POUR: Los Pilares de la Accesibilidad Web
WCAG organiza sus criterios en 4 principios fundamentales conocidos como POUR. Todo criterio de accesibilidad cae bajo uno de estos principios. Si tu sitio cumple los 4, es accesible.
Perceptible: el usuario puede percibir el contenido
- Texto alternativo (alt text): toda imagen necesita una descripción textual para lectores de pantalla
- Subtítulos: todo video necesita subtítulos para personas sordas o en ambientes ruidosos
- Contraste de color: el texto debe tener suficiente contraste contra su fondo (ratio 4.5:1 para texto normal)
- No depender solo del color: si un campo de error solo se marca con borde rojo, un daltónico no lo verá — agrega texto e ícono
- Contenido adaptable: la información y la estructura deben ser determinables programáticamente (HTML semántico)
Operable: el usuario puede navegar e interactuar
- Navegación por teclado: toda funcionalidad debe ser accesible usando solo el teclado (Tab, Enter, Escape, flechas)
- Sin trampas de teclado: el usuario debe poder salir de cualquier componente usando el teclado
- Tiempo suficiente: si hay límites de tiempo (sesiones, formularios), el usuario debe poder extenderlos
- Contenido sin parpadeo: nada debe parpadear más de 3 veces por segundo (riesgo de ataques epilépticos)
- Skip links: un enlace oculto al inicio que permite saltar directamente al contenido principal
Comprensible: el usuario entiende el contenido
- Lenguaje claro: usa lenguaje simple y directo — evita jerga innecesaria y oraciones complejas
- Navegación consistente: los menús y la estructura deben ser iguales en todas las páginas
- Errores identificables: cuando hay un error en un formulario, explica claramente qué salió mal y cómo corregirlo
- Labels en formularios: cada campo de entrada necesita un label visible y asociado programáticamente
- Comportamiento predecible: los elementos interactivos deben comportarse como el usuario espera
Robusto: funciona en diferentes tecnologías
- HTML válido: código HTML sin errores de sintaxis para que los lectores de pantalla lo interpreten correctamente
- Roles ARIA correctos: cuando usas componentes personalizados, asegúrate de que tienen los roles semánticos apropiados
- Compatibilidad con tecnologías asistivas: prueba con lectores de pantalla (VoiceOver, NVDA) y navegación por teclado
- Estado y propiedades: los componentes dinámicos (modales, tabs, accordions) deben comunicar su estado a la tecnología asistiva
Consejo: Si tu sitio web es perceptible, operable, comprensible y robusto, es accesible. Usa POUR como checklist mental cada vez que diseñes o desarrolles un componente.