Cerramos el Módulo 2 demostrando que los fallos reales de accesibilidad se agrupan en cuatro familias: cosas que el usuario no percibe, cosas que no puede operar, cosas que no comprende y cosas que no son robustas. Esas cuatro familias son, exactamente, los principios POUR de WCAG. En este módulo los recorremos uno a uno para entender qué exige cada uno. Empezamos por el primero y más básico: Perceptible. Si Marta (ciega, NVDA), Sofía (baja visión, zoom al 300 %) o Diego (sordo) no pueden percibir la información, todo lo demás sobra: no hay nada que operar ni comprender. Perceptible significa que la información y los componentes de la interfaz deben presentarse de forma que las personas puedan percibirlos, y que ninguna información dependa de un único sentido.

1. Qué exige el principio Perceptible
2. Pauta 1.1: Alternativas textuales
3. Pauta 1.2: Medios tempodependientes
4. Pauta 1.3: Adaptable
5. Pauta 1.4: Distinguible
6. Tabla resumen de criterios
7. Errores comunes y consejos
8. Ejercicios
9. Conclusión

La idea central es la redundancia sensorial: cualquier información transmitida por un canal (una imagen, un sonido, un color, una posición en pantalla) debe estar disponible también por otro canal que el usuario sí pueda usar. Un lector de pantalla convierte texto en voz o braille, pero no puede "ver" una foto ni "oír" un vídeo por ti. El principio Perceptible se organiza en cuatro pautas.

Proporciona alternativas textuales para todo contenido no textual, de modo que pueda transformarse en otros formatos (voz, braille, símbolos, letra grande).

• 1.1.1 Contenido no textual (Nivel A): toda imagen, icono, gráfico, botón gráfico o control no textual necesita una alternativa en texto que cumpla su propósito. Las imágenes decorativas deben marcarse como tales para que el lector las ignore.

En Cursalia, cada tarjeta del catálogo lleva una imagen de portada del curso. Si esa imagen carece de alternativa textual, Marta oye "imagen" o el nombre del archivo, y no sabe qué curso es. La alternativa debe describir la función, no adornar: para una portada suele bastar el título del curso que ya está en el enlace. Un icono de "candado" que indica un curso bloqueado necesita alternativa ("Curso bloqueado"), mientras que un adorno de fondo se marca como decorativo.

El cómo escribir buenas alternativas (texto alternativo útil, alt vacío, imágenes complejas) se desarrolla en el Módulo 5: Alternativas de texto para imágenes. Aquí solo fijamos el requisito.

Cubre el contenido basado en tiempo: audio y vídeo. El reproductor de vídeo-lección de Cursalia entra de lleno aquí. Los criterios escalan por nivel:

• 1.2.1 Solo audio y solo vídeo (pregrabado) (A): una transcripción para el audio; una alternativa textual o pista de audio para el vídeo sin sonido.
• 1.2.2 Subtítulos (pregrabado) (A): los vídeos con voz necesitan subtítulos sincronizados. Sin ellos, Diego no accede a la lección.
• 1.2.3 Audiodescripción o alternativa (pregrabado) (A): describir la información visual importante que no se oye.
• 1.2.4 Subtítulos (en directo) (AA): subtítulos también en emisiones en vivo (un webinar de Cursalia).
• 1.2.5 Audiodescripción (pregrabado) (AA): pista de audio que narra lo visual relevante para quien no ve.

La implementación real de subtítulos, transcripciones y audiodescripción en el reproductor se aborda en el Módulo 5: Vídeo y Audio.

El contenido debe poder presentarse de formas distintas (por ejemplo, con un lector de pantalla o con una hoja de estilo del usuario) sin perder información ni estructura.

• 1.3.1 Información y relaciones (A): la estructura visual (encabezados, listas, tablas, grupos de campos) debe estar en el marcado, no solo en el aspecto. Si un "título" de sección solo es texto grande en negrita, Marta no lo detecta como encabezado y pierde la posibilidad de navegar por estructura (Módulo 2).
• 1.3.2 Secuencia significativa (A): el orden de lectura del código debe tener sentido. En el panel del alumno (SPA), si el CSS coloca la barra de progreso antes del título pero en el DOM va después, el lector la leerá en un orden confuso.
• 1.3.4 Orientación (AA): no forzar solo vertical u horizontal. Sofía puede usar la tableta fijada en un soporte horizontal.
• 1.3.5 Identificar el propósito de la entrada (AA): en el formulario de matrícula, campos como nombre, correo o teléfono deben declarar su propósito (atributo autocomplete) para que el navegador y las TA los rellenen o adapten.

El HTML semántico que hace posible 1.3.1/1.3.2 es el Módulo 4: HTML Semántico.

Facilitar que los usuarios vean y oigan el contenido, separando el primer plano del fondo.

• 1.4.1 Uso del color (A): el color no puede ser el único medio para transmitir información. En el filtro del catálogo, marcar los cursos "nuevos" solo con un punto verde deja fuera a quien no distingue el color; añade una etiqueta o icono.
• 1.4.3 Contraste (mínimo) (AA): texto y texto en imágenes con ratio mínimo 4.5:1 (3:1 para texto grande). Aquí es donde la paleta de marca de Cursalia se pone a prueba: un gris de marca sobre blanco puede quedar por debajo del umbral.
• 1.4.4 Redimensionar texto (AA): el texto debe poder ampliarse hasta el 200 % sin perder contenido ni funcionalidad.
• 1.4.5 Imágenes de texto (AA): usar texto real, no imágenes de texto (salvo logotipos). Un banner de Cursalia con el precio "quemado" en una imagen no se amplía ni se lee.
• 1.4.10 Reflow (AA): el contenido debe reorganizarse en una sola columna a 320 px (equivalente a zoom 400 %) sin scroll horizontal. Clave para Sofía al 300 %.
• 1.4.11 Contraste no textual (AA): bordes de campos, iconos de estado y límites de componentes también necesitan 3:1. El borde del desplegable del filtro debe distinguirse del fondo.
• 1.4.12 Espaciado de texto (AA): si el usuario aumenta interlineado, espaciado entre letras/palabras/párrafos, no se debe perder contenido. Ayuda a Hugo (dislexia).

En Cursalia, la paleta de marca se define una vez y se reutiliza en botones, enlaces y tarjetas; validar su contraste de forma centralizada evita repetir el error en cada superficie.

El cálculo y corrección de contraste y el redimensionamiento se implementan en el Módulo 4: Contraste y Redimensionamiento.

• Confundir "sin alt" con "alt vacío". Omitir alt deja al lector leyendo el nombre del archivo; alt="" marca la imagen como decorativa a propósito. Son cosas distintas.
• Fiar la información al color. "Los campos en rojo son obligatorios" falla 1.4.1. Añade texto o un símbolo.
• Creer que 1.4.3 (contraste de texto) cubre todo. Los bordes e iconos se rigen por 1.4.11, con umbral distinto (3:1). Son criterios separados.
• Poner texto en imágenes por comodidad de diseño. Rompe 1.4.5 y 1.4.4 a la vez; el texto real siempre gana.
• Consejo: revisa Perceptible con dos gestos rápidos: navega con el lector solo por estructura y sube el zoom al 400 %. Si algo desaparece o se descoloca, tienes un fallo perceptible.

Ejercicio 1. En una tarjeta del catálogo, los cursos con plazas agotadas se muestran con la portada teñida de gris. No hay ningún otro indicador. ¿Qué criterio se incumple y cómo lo corriges a nivel de requisito?

Ejercicio 2. El equipo de marca propone un texto secundario en gris claro #9AA0A6 sobre fondo blanco para las descripciones de las tarjetas. ¿Qué criterio hay que verificar y qué umbral aplica? ¿Por qué es un buen sitio para arreglarlo una sola vez?

Ejercicio 3. Clasifica cada elemento según el criterio de la Pauta 1.2 que le aplica: (a) un vídeo-lección pregrabado con narración, (b) un webinar en directo, (c) un podcast de audio de Cursalia.

Solución 1. Se incumple 1.4.1 Uso del color (A): el estado "agotado" se transmite solo por color. Requisito de corrección: añadir una señal no cromática, por ejemplo una etiqueta de texto "Plazas agotadas" o un icono con su alternativa textual, además del tinte. (La implementación visual se verá en el Módulo 4.)

Solución 2. Hay que verificar 1.4.3 Contraste (mínimo), Nivel AA, con umbral 4.5:1 por ser texto normal. #9AA0A6 sobre blanco ronda 2.6:1, por lo que no cumple. Como la paleta de marca se define de forma centralizada y se reutiliza en todas las tarjetas, corregir el token de color una vez propaga el arreglo a todo el catálogo.

Solución 3. (a) Vídeo pregrabado con narración: 1.2.2 Subtítulos (A) y 1.2.5 Audiodescripción (AA). (b) Webinar en directo: 1.2.4 Subtítulos en directo (AA). (c) Podcast solo audio: 1.2.1 (A) mediante transcripción.

El principio Perceptible garantiza que nada dependa de un único sentido: texto alternativo para lo no textual, subtítulos y transcripciones para lo tempodependiente, estructura en el marcado y suficiente contraste, escalado y reflow para lo visual. Hemos fijado qué exige cada criterio y hemos remitido el cómo a los módulos 4 y 5. Pero percibir el contenido no basta: Lucía tiene que poder operarlo solo con el teclado, y nadie debe quedar atrapado en un menú o perder el foco. En la siguiente lección, 03-02 Operable, veremos qué exige WCAG para que toda la interfaz se pueda manejar sin ratón y navegar con orden y foco visibles.