Los principios POUR: La base de la accesibilidad web

Todos los requisitos de WCAG se basan en cuatro principios fundamentales. Si comprendes estos principios en profundidad, a menudo podrás identificar problemas de accesibilidad de forma intuitiva, incluso sin memorizar los criterios de conformidad individuales. Estos cuatro principios — Perceptible, Operable, Comprensible y Robusto — definen las condiciones fundamentales que deben cumplirse para que el contenido sea accesible.

Perceptible: Los usuarios deben poder percibir el contenido

El principio de perceptibilidad aborda el requisito de accesibilidad más fundamental: la información debe estar disponible para al menos uno de los sentidos del usuario. Si un usuario no puede percibir el contenido en absoluto, ningún buen diseño de interacción ni código limpio lo hará utilizable.

Este principio impulsa los requisitos de alternativas textuales para contenido no textual, subtítulos y transcripciones para audio y vídeo, contraste de color suficiente, la capacidad de redimensionar texto y la separación de la información de su presentación visual.

Cómo se ve en la práctica:

Una imagen de banner promocional que anuncia unas rebajas de temporada necesita texto alternativo que describa la promoción, porque un usuario ciego no verá la imagen. Un vídeo de formación necesita subtítulos, porque un usuario sordo no oirá la narración. El texto del cuerpo de tu sitio web necesita suficiente contraste con su fondo, porque un usuario con baja visión podría no poder leer texto con bajo contraste. Un formulario que usa un borde rojo para indicar errores también necesita un mensaje de texto, porque un usuario daltónico podría no percibir el color rojo.

Fallos comunes:

Imágenes sin texto alternativo. Vídeos sin subtítulos. Contraste de color insuficiente. Información transmitida solo mediante color. Contenido que se vuelve inaccesible cuando se amplía al 200 %. Texto placeholder utilizado como única etiqueta para campos de formulario.

Operable: Los usuarios deben poder operar la interfaz

El principio de operabilidad garantiza que los usuarios puedan interactuar con todos los componentes de la interfaz y navegar por todo el contenido, independientemente de cómo interactúen con su dispositivo. Un sitio web bonito y perceptible es inútil si un usuario no puede hacer clic, tocar o navegar con el teclado hasta el contenido que necesita.

Este principio impulsa los requisitos de accesibilidad por teclado, tiempo suficiente para interactuar con el contenido, evitar contenido que pueda causar convulsiones, mecanismos de navegación efectivos y métodos de entrada flexibles.

Cómo se ve en la práctica:

Un menú desplegable que se abre al pasar el cursor también debe abrirse al recibir el foco del teclado y ser navegable con las teclas de dirección. Un tiempo de espera de sesión en un sitio de banca debe avisar al usuario y permitirle extender la sesión. Una presentación de diapositivas que avanza automáticamente debe tener controles de pausa. Un panel de filtros de búsqueda debe ser accesible por teclado para que los usuarios que no pueden usar el ratón puedan filtrar los resultados. Los elementos interactivos deben ser lo suficientemente grandes para ser pulsados sin activar accidentalmente controles adyacentes.

Fallos comunes:

Elementos interactivos que solo responden a clics del ratón. Menús desplegables inaccesibles por teclado. Trampas de foco en modales o widgets. Skip links ausentes. Límites de tiempo sin opciones de extensión. Contenido que parpadea rápidamente.

Comprensible: Los usuarios deben poder entender el contenido y la interfaz

El principio de comprensibilidad garantiza que tanto la información presentada como el funcionamiento de la interfaz sean comprensibles para los usuarios. El contenido que es perceptible y operable pero incomprensible sigue sin pasar la prueba de accesibilidad.

Este principio impulsa los requisitos de contenido legible, comportamiento predecible de la interfaz y asistencia en la entrada que ayude a los usuarios a evitar y corregir errores.

Cómo se ve en la práctica:

Una página escrita en español tiene el atributo lang="es" para que los lectores de pantalla usen la pronunciación correcta. Los menús de navegación aparecen en la misma ubicación y orden en cada página. Cuando un usuario comete un error en un formulario, el error se identifica claramente y se proporciona una sugerencia de corrección. Se avisa a los usuarios antes de acciones con consecuencias significativas, como enviar un pago o eliminar datos.

Fallos comunes:

Declaraciones de idioma ausentes. Navegación inconsistente entre páginas. Validación de formularios que identifica errores sin explicarlos. Cambios de contexto automáticos activados al seleccionar una opción o entrar en un campo. Contenido con jerga técnica sin explicaciones.

Robusto: El contenido debe funcionar en diferentes tecnologías

El principio de robustez garantiza que el contenido esté construido sobre bases técnicas sólidas que funcionen de forma fiable en diferentes navegadores, dispositivos y tecnologías de asistencia — tanto actuales como futuras.

Este principio impulsa los requisitos de marcado limpio y conforme a estándares, uso adecuado de ARIA cuando el HTML nativo es insuficiente y comunicación programática de estados y valores de los componentes a las tecnologías de asistencia.

Cómo se ve en la práctica:

Un widget desplegable personalizado utiliza roles, estados y propiedades ARIA adecuados para que un lector de pantalla lo anuncie como un combobox, comunique si está expandido o contraído, e identifique la opción actualmente seleccionada. Un indicador de chat en vivo utiliza una región ARIA en vivo para que los lectores de pantalla anuncien los nuevos mensajes sin que el usuario necesite navegar hasta la ventana de chat. Los mensajes de estado como "Artículo añadido al carrito" se anuncian a los lectores de pantalla a través de roles apropiados.

Fallos comunes:

Widgets personalizados que carecen de roles y estados ARIA. Mensajes de estado que solo se muestran visualmente pero no se anuncian a los lectores de pantalla. Uso incorrecto de ARIA que entra en conflicto con la semántica nativa de HTML. Contenido que funciona en un navegador pero falla en otro debido a código no estándar.

Aplicar POUR como principio de diseño

Los principios POUR no son solo categorías para organizar criterios de conformidad — son un marco de pensamiento. Al evaluar cualquier pieza de contenido o funcionalidad, haz cuatro preguntas: ¿Pueden todos los usuarios percibirlo? ¿Pueden todos los usuarios operarlo? ¿Pueden todos los usuarios comprenderlo? ¿Funcionará en todas las tecnologías relevantes? Si la respuesta a cualquiera de estas preguntas es no, has identificado una barrera de accesibilidad.