Los cuatro principios: perceptible, operable, comprensible y robusto

Toda la estructura de las WCAG cuelga de cuatro principios, conocidos por sus siglas en inglés POUR: Perceivable, Operable, Understandable, Robust. Son la respuesta a una pregunta sencilla: ¿qué tiene que ocurrir para que una persona pueda usar un contenido? Tiene que percibirlo, tiene que poder manejarlo, tiene que entenderlo y la tecnología que usa tiene que ser capaz de interpretarlo. Si falla cualquiera de los cuatro, la persona queda fuera. En esta lección verás cada principio con sus pautas y ejemplos reales.

Principio 1: Perceptible

La información y los componentes de la interfaz deben presentarse de modo que las personas puedan percibirlos con alguno de sus sentidos. No basta con que la información «esté»: tiene que poder llegar a la persona por un canal que ella pueda usar. Sus cuatro pautas son:

• 1.1 Alternativas textuales: todo contenido no textual tiene una alternativa en texto, porque el texto se puede convertir a voz, braille, tamaño grande o cualquier otro formato.
• 1.2 Medios tempodependientes: audio y vídeo con subtítulos, transcripciones y audiodescripción.
• 1.3 Adaptable: el contenido puede presentarse de distintas formas (por ejemplo, con otra maquetación) sin perder información ni estructura. Aquí vive 1.3.1 Información y relaciones, el criterio de la semántica.
• 1.4 Distinguible: facilitar que se vea y se oiga el contenido: contraste, color, tamaño de texto, espaciado, control del audio.

Principio 2: Operable

Los componentes de la interfaz y la navegación deben poder manejarse. Percibir un botón no sirve de nada si no se puede pulsar. Este principio se ocupa de cómo la persona interactúa:

• 2.1 Accesible por teclado: toda la funcionalidad disponible desde el teclado, sin trampas, sin atajos que interfieran.
• 2.2 Tiempo suficiente: límites de tiempo ajustables, posibilidad de pausar lo que se mueve.
• 2.3 Convulsiones y reacciones físicas: nada que parpadee más de tres veces por segundo; animaciones evitables.
• 2.4 Navegable: saltar bloques, títulos de página, orden del foco, propósito de los enlaces, varias formas de llegar, encabezados, foco visible y no oculto.
• 2.5 Modalidades de entrada: gestos, cancelación del puntero, etiqueta en el nombre, movimiento, arrastre y tamaño del objetivo.

Principio 3: Comprensible

La información y el manejo de la interfaz deben ser comprensibles. Una persona puede percibir un texto y operar un formulario, y aun así no entender qué dice ni qué se le pide. Sus pautas son:

• 3.1 Legible: idioma de la página y de las partes en otro idioma declarado en el código (para que el lector de pantalla pronuncie bien); en AAA, palabras inusuales, abreviaturas y nivel de lectura.
• 3.2 Predecible: nada cambia de contexto al recibir el foco o al introducir datos sin aviso; navegación e identificación coherentes; mecanismos de ayuda en el mismo orden relativo en las páginas donde se repiten (3.2.6, nuevo en 2.2).
• 3.3 Ayuda a la entrada de datos: errores identificados y descritos en texto, etiquetas e instrucciones, sugerencias para corregir, prevención de errores en operaciones legales o financieras, entrada redundante y autenticación accesible (3.3.7 y 3.3.8, nuevos en 2.2).

<!-- Incorrecto: el lector de pantalla leerá el francés con fonética española -->
<html lang="es">
  <p>Como dicen en París: <em>c'est la vie</em>.</p>

<!-- Correcto: 3.1.2 Idioma de las partes -->
<html lang="es">
  <p>Como dicen en París: <em lang="fr">c'est la vie</em>.</p>

Principio 4: Robusto

El contenido debe ser lo bastante robusto como para que lo interpreten de forma fiable una amplia variedad de agentes de usuario, incluidas las tecnologías de apoyo. Es el principio «técnico»: si el código es incorrecto o ambiguo, el navegador y el lector de pantalla no sabrán qué es cada cosa, aunque visualmente parezca perfecto. Su única pauta, 4.1 Compatible, contiene:

• 4.1.2 Nombre, función, valor: todo componente de interfaz expone a las tecnologías de apoyo su nombre, su función (botón, casilla, pestaña) y su estado o valor (marcado, expandido, 50 %). Es el criterio que falla cuando se construyen controles con <div> y <span> sin ARIA.
• 4.1.3 Mensajes de estado: los mensajes que aparecen sin mover el foco («3 resultados encontrados», «Añadido al carrito») se anuncian a las tecnologías de apoyo mediante roles o propiedades adecuados.

4.1.1 Procesamiento, que exigía HTML bien formado, se retiró en WCAG 2.2 porque los navegadores actuales reparan el código y los problemas reales que causaba ya se capturan en 1.3.1 y 4.1.2.

Un mismo componente, cuatro miradas

Aplicar los cuatro principios a un solo elemento ayuda a interiorizarlos. Tomemos el botón «Añadir al carrito» de una tienda:

Resumen

• Perceptible: la información llega por algún sentido (alternativas textuales, subtítulos, estructura, contraste).
• Operable: se puede manejar (teclado, tiempo, sin destellos, navegable, modalidades de entrada).
• Comprensible: se entiende (idioma, previsibilidad, ayuda en formularios).
• Robusto: la tecnología lo interpreta (nombre, función, valor; mensajes de estado).
• Los principios son acumulativos; cada barrera remite a uno de ellos.