Alternativas textuales, multimedia y adaptabilidad: 1.1.1, 1.2.x y 1.3.1 a 1.3.5

El principio Perceptible exige que la información pueda llegar a la persona por más de un sentido y en más de una presentación. Sus tres primeras pautas (alternativas textuales, medios tempodependientes y adaptabilidad) concentran muchos de los fallos de nivel A de cualquier sitio. Esta lección repasa cada criterio con la mirada del auditor: qué comprobar, qué excepciones admitir y qué errores de clasificación evitar.

1.1.1 Contenido no textual (A)

Todo contenido no textual debe tener una alternativa textual que cumpla el mismo propósito, con excepciones tasadas: controles e inputs (deben tener nombre, no descripción), medios tempodependientes (se cubren en 1.2), pruebas o ejercicios que no tendrían sentido en texto (se describe su naturaleza), experiencias sensoriales, CAPTCHA (alternativa en otra modalidad sensorial y descripción de su propósito) y decoración (debe poder ignorarse por la tecnología de apoyo).

Cómo evaluarlo: inventario de imágenes, iconos, SVG, canvas, imágenes de fondo con significado y gráficos. Para cada uno, decide su función (informativa, funcional, decorativa, compleja, texto) y comprueba que la alternativa encaja. Pregunta clave: si quito la imagen y dejo solo el alt, ¿la página sigue diciendo lo mismo?

Fallos típicos: alt que repite el nombre de fichero; alt vacío en imagen que aporta información; decorativas con alt descriptivo (ruido); iconos de enlace con alt genérico («icono»); gráfico complejo con alt de tres palabras y sin descripción larga ni tabla; SVG inline sin role="img" ni <title> accesible; imagen enlazada cuyo alt describe la foto y no el destino.

<!-- Incorrecto: el alt describe la imagen, no la función -->
<a href="/carrito"><img src="cesta.svg" alt="Dibujo de una cesta"></a>

<!-- Correcto: la alternativa indica el destino y el estado -->
<a href="/carrito"><img src="cesta.svg" alt="Carrito, 3 artículos"></a>

<!-- Decorativa: alt vacío para que el lector la ignore -->
<img src="separador.png" alt="">

1.2 Medios tempodependientes

• 1.2.1 Solo audio y solo vídeo (grabado) (A): un podcast necesita transcripción; un vídeo sin audio (animación explicativa) necesita transcripción o pista de audio equivalente.
• 1.2.2 Subtítulos (grabados) (A): todo vídeo con audio necesita subtítulos sincronizados que incluyan el diálogo y los sonidos relevantes. Los automáticos sin revisar no cumplen si contienen errores que alteran el sentido. Excepción: el vídeo es alternativa de un texto y así se indica.
• 1.2.3 Audiodescripción o medio alternativo (grabado) (A): si el vídeo tiene información visual no presente en el audio, hace falta audiodescripción o una transcripción descriptiva completa. Si todo lo visual se dice en el audio (una persona hablando a cámara), el criterio se cumple sin añadir nada.
• 1.2.4 Subtítulos (en directo) (AA): retransmisiones (plenos municipales, eventos) con subtítulos en tiempo real.
• 1.2.5 Audiodescripción (grabada) (AA): a nivel AA ya no basta la transcripción: hace falta audiodescripción cuando hay información visual relevante.

Cómo evaluarlo: reproduce cada vídeo con el sonido apagado y luego con la pantalla apagada. Comprueba que los subtítulos existan, estén sincronizados, sean correctos y se puedan activar desde el reproductor. Los vídeos incrustados de YouTube forman parte de la página: si están sin subtítulos, el fallo es de la página.

1.3.1 Información y relaciones (A)

Lo que se comunica visualmente mediante estructura (encabezados, listas, tablas, agrupaciones, etiquetas, énfasis con significado) debe estar disponible programáticamente o en texto. Es el criterio más amplio del nivel A y uno de los más incumplidos.

Comprobaciones: encabezados visuales marcados como h1-h6 con jerarquía coherente; listas con ul/ol; tablas de datos con th, scope o headers y caption; campos con label asociado; grupos de radios con fieldset/legend; texto obligatorio indicado no solo con asterisco rojo sino de forma programática o textual; tablas de maquetación que no se anuncian como tablas; texto en negrita que actúa de encabezado sin serlo.

Errores de clasificación: un encabezado que salta de nivel no es fallo si la estructura es coherente; un campo sin etiqueta es 1.3.1 y 4.1.2 (y 3.3.2 si tampoco hay instrucción visible); un mensaje de error solo en rojo es 1.4.1 y 3.3.1, no 1.3.1.

1.3.2 Secuencia significativa (A)

Cuando el orden del contenido afecta a su significado, el orden de lectura programático debe ser correcto. Afecta a maquetaciones con CSS order, flex-direction: row-reverse, posicionamiento absoluto y columnas donde el DOM no sigue el orden visual. Prueba: desactiva CSS o lee con el lector y compara con el orden visual; la lista de encabezados y el orden de Tab ayudan. No confundas con 2.4.3, que trata el orden del foco entre elementos interactivos.

1.3.3 Características sensoriales (A)

Las instrucciones no pueden depender solo de forma, color, tamaño, posición visual, orientación o sonido: «pulse el botón verde de la derecha», «cuando oiga el pitido». Se cumple añadiendo un referente textual: «pulse Continuar (botón verde de la derecha)». Suele aparecer en ayudas y en formularios con instrucciones gráficas.

1.3.4 Orientación (AA)

El contenido no debe restringirse a vertical u horizontal salvo que sea esencial (cheque bancario, piano). Un aviso de «gire el dispositivo» que bloquea el uso incumple; muchas personas tienen el móvil fijado a una silla de ruedas en una orientación. Prueba: rota el dispositivo con el bloqueo de orientación desactivado y comprueba que todo sigue operativo.

1.3.5 Identificar el propósito de la entrada (AA)

Los campos que recogen información sobre la persona usuaria (nombre, correo, teléfono, dirección, tarjeta…) deben identificar su propósito programáticamente, en la práctica mediante autocomplete con los valores definidos en HTML (given-name, family-name, email, tel, postal-code, cc-number…). Esto permite el autocompletado y que extensiones sustituyan etiquetas por iconos familiares. No aplica a campos que no son sobre el usuario (buscador, número de expediente). Fallos: ausencia de autocomplete en formularios de registro, autocomplete="off" en campos de datos personales, valores inventados (autocomplete="nombre").

<label for="email">Correo electrónico</label>
<input id="email" name="correo" type="email" autocomplete="email">

<label for="cp">Código postal</label>
<input id="cp" name="cp" inputmode="numeric" autocomplete="postal-code">

En la lección 8 encontrarás una tabla con las confusiones de clasificación más frecuentes entre estos criterios y los del resto del curso.

Resumen

• 1.1.1: alternativa según la función de la imagen; alt vacío para decorativas; CAPTCHA con alternativa en otra modalidad.
• 1.2.1-1.2.5: transcripción para solo audio o solo vídeo, subtítulos exactos y sincronizados, audiodescripción cuando hay información visual no hablada (AA); subtítulos en directo a nivel AA.
• 1.3.1: la estructura visual (encabezados, listas, tablas, etiquetas, grupos) debe existir en el código; 1.3.2: orden de lectura coherente con el visual.
• 1.3.3: instrucciones no dependientes solo de características sensoriales; 1.3.4: sin bloqueo de orientación salvo esencial.
• 1.3.5: autocomplete con valores estándar en los campos sobre la persona usuaria.