Accesibilidad Web (WCAG) Texto Leccion

Principios POUR de accesibilidad web

POUR: Los Pilares de la Accesibilidad Web Respuesta rápida: principios POUR: POUR resume los cuatro principios de WCAG: Perceptible, Operable, Comprensible y Robusto. Una interfaz accesible debe poder percibirse, usarse con distintos métodos de entrada, entenderse sin fricción innecesaria e interpretarse bien por navegadores y tecnologías de asistencia. WCAG organiza sus criterios en 4 principios fundamentales conocidos como POUR. Todo criterio de accesibilidad cae bajo uno de estos principios.

Tiempo de estudio

20 Min

POUR: Los Pilares de la Accesibilidad Web

Respuesta rápida: principios POUR: POUR resume los cuatro principios de WCAG: Perceptible, Operable, Comprensible y Robusto. Una interfaz accesible debe poder percibirse, usarse con distintos métodos de entrada, entenderse sin fricción innecesaria e interpretarse bien por navegadores y tecnologías de asistencia.

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.

Checklist POUR para auditar una página real

Usá POUR como una revisión rápida antes de publicar una landing, checkout, curso, dashboard o formulario. No reemplaza una auditoría WCAG completa, pero ayuda a encontrar fallas visibles en minutos.

Principio	Pregunta de auditoría	Ejemplo de mejora
Perceptible	¿La información se entiende sin depender solo de vista, color o audio?	Agregar alt text, subtítulos, labels visibles y contraste suficiente.
Operable	¿Se puede navegar con teclado y sin tiempos imposibles?	Orden de foco claro, botones reales, skip links y estados focus visibles.
Comprensible	¿La interfaz explica qué hacer y cómo corregir errores?	Mensajes de error específicos, textos simples y formularios predecibles.
Robusto	¿El HTML y ARIA funcionan con tecnologías actuales y futuras?	HTML semántico, nombres accesibles y ARIA solo cuando mejora la semántica.

POUR y WCAG 2.2

POUR no es una lista paralela a WCAG: es la estructura conceptual que agrupa las pautas y criterios de éxito. W3C WAI explica que WCAG se organiza bajo los principios perceivable, operable, understandable and robust, y la especificación WCAG 2.2 mantiene esos principios como base del estándar.

Referencia oficial: W3C WAI: WCAG overview y WCAG 2 at a Glance.

POUR como habilidad laboral

Explicar los principios POUR sirve en entrevistas frontend, UX/UI, QA y producto porque muestra criterio de calidad más allá de lo visual. Convertí esta lección en evidencia auditando una página propia: documentá 8 problemas, priorizá impacto y subí capturas antes/después.

Frontend: revisá semántica, foco, teclado, labels y estados de error.

UX/UI: revisá contraste, jerarquía, lenguaje, instrucciones y prevención de errores.

QA: armá casos de prueba con teclado, lector de pantalla, zoom y formularios.

Freelance: ofrecé auditorías rápidas de accesibilidad para landings, ecommerce, cursos y SaaS.

Conectá esta habilidad con Desarrollador Frontend, buscá roles en empleos y ofrecé auditorías o mejoras de accesibilidad desde el marketplace de profesionales.