Caso práctico, ejercicios y lista de comprobación

Esta lección aplica todo el curso a un caso realista: una página auditada hallazgo a hallazgo, con criterio, medición, excepciones descartadas y corrección, y también los posibles fallos que se descartan y por qué. Después tienes seis ejercicios con solución, una lista de comprobación para tus auditorías y los recursos oficiales de referencia.

Caso práctico: la página de cita previa de una sede electrónica

El Ayuntamiento de Villaejemplo (ficticio) encarga la evaluación de su sede electrónica frente a WCAG 2.2 AA, con correspondencia con la EN 301 549 v3.2.1 (PDF, se abre en una ventana nueva) para su declaración conforme al RD 1112/2018 (PDF, se abre en una ventana nueva). Esta lección se centra en una página de la muestra: sede.villaejemplo.example/cita-previa. Contiene una cabecera fija de 96 px, el banner de cookies de un proveedor, tarjetas para elegir el servicio, un calendario, una tabla de franjas horarias, un formulario de datos personales, un mapa de oficinas y un vídeo tutorial. La sesión caduca a los 10 minutos.

Configuración registrada: Windows 11, Chrome y Firefox en sus versiones del día, NVDA, ventana de 1280 px, zoom al 100 %, 200 % y 400 %, y emulación de 320 px.

Paso 1: recorrido con teclado

Al tabular por las tarjetas de servicio, el foco no se detiene en ellas: son div con un manejador de clic. Hallazgo 1: 2.1.1 Teclado, con 4.1.2 como secundario porque tampoco tienen rol ni nombre de botón. Más abajo, el botón «Solicitar» queda completamente debajo de la cabecera fija cuando recibe el foco. Hallazgo 2: 2.4.11 Foco no oculto (mínimo); no encaja en la nota sobre contenido abierto por el usuario, porque la cabecera fija la ha puesto el autor y no se puede retirar. Se marca como criterio de WCAG 2.2 no incluido en la EN 301 549 v3.2.1. Corrección: scroll-padding-top de al menos 96 px.

Paso 2: mediciones visuales

El enlace «Configurar» del banner de cookies es #9B9B9B sobre blanco a 13 px: 2,78:1. Hallazgo 3: 1.4.3, en el componente de un tercero, que se incluye porque forma parte de la página. Los campos del formulario usan como única pista un placeholder #A0A0A0 (2,61:1): hallazgo 4: 1.4.3; la ausencia de etiqueta visible se anota para evaluarla con 3.3.2 en los criterios del curso siguiente. El logotipo del ayuntamiento, en gris claro sobre blanco, se descarta: los logotipos están exentos de 1.4.3.

En el calendario, los días disponibles solo se distinguen por un fondo verde claro. Hallazgo 5: 1.4.1 Uso del color. Los días miden 20 × 20 px con 1 px de separación (centros a 21 px), lo que no cumple el tamaño ni el espaciado de 2.5.8; sin embargo, la página ofrece un campo de texto «Fecha (dd/mm/aaaa)» con un botón de 44 px que hace lo mismo: se aplica la excepción de control equivalente y no se registra fallo, aunque sí una recomendación.

Paso 3: zoom, reflow y espaciado

A 320 px CSS, el formulario de datos personales tiene un ancho fijo de 480 px y obliga a desplazarse en horizontal para ver los campos. Hallazgo 6: 1.4.10 Reajuste de los elementos. La tabla de franjas horarias también se desplaza en horizontal dentro de su contenedor, pero las tablas de datos están exentas: no se registra. Con el espaciado de 1.4.12 aplicado, todo el texto sigue visible.

Paso 4: tiempo, formulario y multimedia

A los 9 minutos se abre un diálogo que recibe el foco, avisa de que quedan 60 segundos y ofrece el botón «Ampliar sesión», que puede usarse sin límite: 2.2.1 se cumple. Tras ampliar, la confirmación «Sesión ampliada» aparece sin que el lector de pantalla la anuncie, lo que se anota para evaluar 4.1.3 en el curso siguiente. Los campos de nombre, apellidos, correo y teléfono no tienen autocomplete: hallazgo 7: 1.3.5.

El mapa de oficinas tiene botones de zoom y desplazamiento, y debajo hay un listado HTML de oficinas con dirección y horario: 1.1.1, 2.5.1 y 2.5.7 se cumplen. El vídeo tutorial tiene subtítulos automáticos que transcriben «cita previa» como «visita previa» y la locutora dice «pulse aquí» mientras el cursor señala un botón cuyo nombre no se menciona. Hallazgo 8: 1.2.2 (subtítulos inexactos) y hallazgo 9: 1.2.3 y 1.2.5 (información visual que no está en el audio, sin audiodescripción ni transcripción descriptiva; la transcripción habría bastado para el nivel A, pero el AA exige audiodescripción).

Resultado de la página

Nueve hallazgos, cinco posibles fallos descartados con su justificación (logotipo, calendario con equivalente, tabla de datos, sesión con aviso y mapa con alternativa) y dos notas para el curso siguiente. Los hallazgos 1 y 2 son de severidad máxima porque impiden completar la cita con teclado; el 3 se comunica al proveedor de cookies a través del cliente.

Ejercicios de autoevaluación

Ejercicio 1. Un texto de ayuda de 14 px en peso normal es #757575 sobre blanco y el analizador da 4,61:1. ¿Cumple 1.4.3?

Ejercicio 2. En el pie, cuatro iconos de redes sociales de 22 × 22 px están separados 4 px entre sí. No hay otros enlaces equivalentes. ¿Cumplen 2.5.8?

Ejercicio 3. El botón muestra el texto «Enviar solicitud», pero su aria-label es «Botón de envío». ¿Qué criterio incumple?

Ejercicio 4. La cabecera de la portada tiene un vídeo de fondo sin sonido que se repite en bucle y no tiene control de pausa. ¿Qué criterio incumple y qué implica?

Ejercicio 5. El indicador de foco de los enlaces es un contorno de 2 px #CCCCCC sobre fondo blanco (1,61:1). ¿Es fallo de 2.4.7 o de 1.4.11?

Ejercicio 6. Un chat flotante que no se puede cerrar tapa por completo el botón «Siguiente» cuando recibe el foco. El cliente necesita la declaración conforme al RD 1112/2018. ¿Cómo lo registras?

Lista de comprobación

• Justifico cada fallo con el texto del criterio, no con una técnica.
• Compruebo las definiciones y descarto por escrito cada excepción.
• Clasifico cada imagen según su función antes de juzgar su alt.
• Reviso cada vídeo sin sonido y sin imagen.
• Mido el contraste del color renderizado, en todos los estados, sin redondear.
• Pruebo 1.4.4 al 200 %, 1.4.10 a 320 px CSS y 1.4.12 con el espaciado aplicado.
• Recorro cada página solo con teclado, buscando trampas y foco oculto.
• Localizo límites de tiempo y contenido en movimiento, y los cronometro.
• Busco alternativas de puntero simple para gestos y arrastres.
• Mido los objetivos pequeños y aplico el círculo de 24 px.
• Incluyo los componentes de terceros y vigilo los de no interferencia.
• Asigno criterio principal y secundarios, nivel y versión.
• Registro los defectos de plantilla una sola vez como globales.
• Anoto la configuración y la herramienta de cada medición.

Para seguir aprendiendo

• WCAG 2.2, Recomendación del W3C: texto normativo, excepciones y glosario.
• Comprender WCAG 2.2: intención, ejemplos y casos límite de cada criterio.
• Técnicas para WCAG 2.2: técnicas suficientes y fallos documentados.
• Referencia rápida de WCAG 2.2: criterios, técnicas y fallos filtrables por nivel.
• EN 301 549 v3.2.1 (ETSI): capítulo 9, requisitos para la web.