Principios POUR

Definición Técnica

Principios POUR es el acrónimo que representa los cuatro principios fundamentales de las Pautas de Accesibilidad para el Contenido Web (WCAG). Estos principios forman la base conceptual sobre la cual se construyen todos los criterios de éxito y técnicas de WCAG 2.1.

Los Cuatro Principios

1. Perceptible (Perceivable)

La información y los componentes de la interfaz de usuario deben ser presentados de manera que los usuarios puedan percibirlos.

Qué significa:

• El contenido debe ser detectable por al menos uno de los sentidos
• No puede depender únicamente de un sentido específico (como solo la vista)
• Debe proporcionar alternativas para diferentes capacidades sensoriales

Ejemplos prácticos:

• Texto alternativo para imágenes (alternativa visual para ciegos)
• Subtítulos para videos (alternativa auditiva para sordos)
• Contraste suficiente para texto (perceptible para baja visión)
• Tamaño de fuente ajustable (perceptible para diferentes necesidades visuales)

2. Operable (Operable)

Los componentes de la interfaz de usuario y la navegación deben ser operables.

Qué significa:

• Todos los controles deben ser accesibles mediante diferentes métodos de entrada
• No debe haber interacciones que requieran habilidades motoras específicas
• Los usuarios deben tener control sobre el tiempo y las interrupciones

Ejemplos prácticos:

• Navegación por teclado: Todo debe ser operable sin mouse
• Tamaños de objetivo grandes: Áreas táctiles de al menos 44x44px
• Sin gestos complejos: Alternativas para gestos multipunto
• Control de tiempo: Opciones para pausar, detener o extender límites de tiempo

3. Comprensible (Understandable)

La información y el funcionamiento de la interfaz de usuario deben ser comprensibles.

Qué significa:

• El contenido debe ser legible y claro
• El funcionamiento de la interfaz debe ser predecible
• Los usuarios deben poder evitar y corregir errores

Ejemplos prácticos:

• Lenguaje claro: Evitar jerga técnica innecesaria
• Navegación consistente: Misma estructura en todas las páginas
• Mensajes de error claros: Explicar qué salió mal y cómo corregirlo
• Instrucciones claras: Guías paso a paso para tareas complejas

4. Robusto (Robust)

El contenido debe ser lo suficientemente robusto para ser interpretado de manera confiable por una amplia variedad de agentes de usuario, incluyendo tecnologías de asistencia.

Qué significa:

• El código debe seguir estándares web
• Debe ser compatible con tecnologías actuales y futuras
• Debe funcionar con diferentes navegadores y tecnologías de asistencia

Ejemplos prácticos:

• HTML válido: Código que sigue estándares W3C
• ARIA correcto: Atributos ARIA bien implementados
• Semántica HTML: Usar elementos HTML apropiados
• Compatibilidad: Funcionar con lectores de pantalla actuales y futuros

Relación con Criterios WCAG

Cada criterio de éxito de WCAG 2.1 está asociado a uno o más de estos principios:

Perceptible

• 1.1.1 Contenido no textual
• 1.3.1 Información y relaciones
• 1.4.3 Contraste (mínimo)
• 1.4.10 Reflow

Operable

• 2.1.1 Teclado
• 2.4.1 Omitir bloques
• 2.5.5 Tamaño de objetivo
• 4.1.2 Nombre, rol, valor

Comprensible

• 3.1.1 Idioma de la página
• 3.2.1 Al enfocar
• 3.3.1 Identificación de errores
• 3.3.2 Etiquetas o instrucciones

Robusto

• 4.1.1 Procesamiento
• 4.1.2 Nombre, rol, valor
• 4.1.3 Mensajes de estado

Aplicación Práctica

Ejemplo: Formulario Accesible

Un formulario que cumple los principios POUR:

<!-- ✅ Perceptible: Labels visibles y asociados -->
<label for="email">Correo electrónico</label>
<input type="email" id="email" required>

<!-- ✅ Operable: Navegable por teclado, sin gestos complejos -->
<button type="submit" style="min-width: 44px; min-height: 44px;">
  Enviar
</button>

<!-- ✅ Comprensible: Instrucciones claras, errores descriptivos -->
<small id="email-help">Usaremos este email para contactarte</small>
<span id="email-error" role="alert">El formato del email no es válido</span>

<!-- ✅ Robusto: HTML semántico, ARIA cuando es necesario -->
<form aria-label="Formulario de contacto">
  <!-- Contenido -->
</form>

Errores Comunes

1. Enfocarse solo en uno de los principios: Todos son igualmente importantes
2. Asumir que "Robusto" solo es código: También implica compatibilidad y futuro
3. Ignorar "Comprensible": Muchos sitios fallan en claridad y consistencia
4. "Operable" solo para teclado: También incluye táctil, voz y otros métodos

Beneficios de Seguir POUR

• Cobertura completa: Aborda todas las dimensiones de accesibilidad
• Marco estructurado: Facilita la evaluación y remediación
• Base sólida: Fundamenta decisiones de diseño y desarrollo
• Escalabilidad: Aplica a tecnologías actuales y futuras

Referencias

• WCAG 2.1 Principles
• Understanding WCAG 2.1

Términos Relacionados

• WCAG 2.1
• Criterio de éxito
• Conformidad
• Accesibilidad Web