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

Esta lección aplica el curso completo a un encargo realista. Primero verás un caso resuelto paso a paso con los cinco pasos de WCAG-EM (se abre en una ventana nueva); después, cinco ejercicios para comprobar lo aprendido, una lista de comprobación para tu próxima auditoría y recursos oficiales para seguir profundizando.

Caso práctico: la web de venta de billetes de una empresa de autobuses

TransMeseta (empresa ficticia) opera líneas regulares de autobús de largo recorrido entre varias comunidades autónomas. Sus servicios de venta en línea están dentro del ámbito de la Ley 11/2023 (PDF, se abre en una ventana nueva), aplicable desde el 28 de junio de 2025, y la dirección encarga una auditoría para conocer su situación. Tiene un portal informativo (www.transmeseta.example), una aplicación de compra hecha con un framework de JavaScript (compra.transmeseta.example) y una app nativa para móvil.

Paso 1: alcance

• Sitio: portal y aplicación de compra. La app nativa queda fuera, porque se evaluará con su propia metodología (nivel 6), y así se dice expresamente.
• Nivel objetivo: WCAG 2.2 AA. Se informa además de la correspondencia con la EN 301 549 v3.2.1 (PDF, se abre en una ventana nueva), que remite a WCAG 2.1 AA, para que el resultado sirva en ambos marcos.
• Línea base: Windows 11 con NVDA y Chrome y Firefox, y con JAWS y Chrome; iOS con VoiceOver y Safari; Android con TalkBack y Chrome; zoom al 200 % y al 400 % y Control por voz de iOS. Versiones fijadas el primer día.
• Requisitos adicionales: evaluar el billete electrónico en PDF que se envía por correo.
• Datos de prueba: entorno de preproducción congelado, tarjeta de pruebas de la pasarela y dos usuarios registrados.

Paso 2: exploración

El inventario identifica 9 plantillas (inicio, listado de destinos, ficha de destino, horarios, noticias, ayuda, contacto, resultados de búsqueda de viajes y área de cliente) y varios componentes críticos: buscador de viajes con autocompletado de origen y destino, selector de fecha, selector gráfico de asientos, banner de cookies de un proveedor externo y chat de atención de un tercero. Hay además un mapa de paradas incrustado, 140 PDF de horarios y tres procesos: comprar un billete, registrarse y cambiar un billete.

Paso 3: muestra

La muestra estructurada tiene 21 elementos: 7 páginas comunes (inicio, contacto, ayuda, aviso legal, accesibilidad, mapa web y buscador del portal), una instancia de cada una de las otras 6 plantillas, 2 PDF de horarios de líneas distintas, el billete en PDF y 5 estados (autocompletado abierto, calendario abierto, asiento seleccionado, error en los datos de viajeros y pago rechazado). Los tres procesos entran completos; la compra tiene 6 pasos: búsqueda, resultados, asientos, datos de viajeros, pago en la pasarela y confirmación con el billete. La muestra aleatoria la forman 2 páginas tomadas al azar del sitemap, aproximadamente el 10 %.

Paso 4: evaluación y comparación

• El selector gráfico de asientos no es operable con teclado: 2.1.1 Teclado, no cumple. Como es el paso 3 de la compra, el proceso de compra entero es no conforme.
• El autocompletado funciona con NVDA y JAWS, pero con VoiceOver en iOS las sugerencias no se anuncian ni se pueden elegir: 4.1.2 Nombre, función, valor, no cumple, con la combinación indicada en el hallazgo.
• Los errores de los datos de viajeros se marcan solo con un borde rojo: 1.4.1 Uso del color y 3.3.1 Identificación de errores, no cumplen.
• La pasarela de pago, de una entidad bancaria, se evalúa como parte del proceso: falla 2.4.7 Foco visible. Es contenido de terceros, pero elegido por la empresa, que responde de él.
• Los enlaces del pie, componente global, tienen un contraste de 3,1:1: 1.4.3 Contraste (mínimo), no cumple en todas las páginas.

En la comparación, una de las páginas aleatorias es una ficha de «oferta de verano» con la tabla de precios en imagen, plantilla que no estaba inventariada. Se amplía la muestra con dos fichas de oferta, se evalúan (fallan 1.1.1 Contenido no textual y 1.4.5 Imágenes de texto) y se documenta la ampliación.

Paso 5: resultados

Ninguna página de la muestra es conforme AA, por el pie, y el proceso de compra no es conforme. Como no se alcanza el nivel objetivo, no procede emitir una declaración de evaluación de WCAG-EM; la conclusión del informe dice: «Según la evaluación realizada entre el 3 y el 14 de febrero sobre 25 elementos (21 de la muestra estructurada, 2 aleatorios y 2 añadidos tras la comparación) y 3 procesos completos, con la línea base indicada, el sitio no alcanza la conformidad con WCAG 2.2 AA. Dos de los incumplimientos impiden completar la compra». Se adjunta el informe exportado desde la WCAG-EM Report Tool.

Ejercicios de autoevaluación

1. El director comercial propone sacar el selector de asientos del alcance, porque «si no eliges asiento, el sistema te asigna uno». ¿Cambia el veredicto?

2. A mitad de la auditoría, desarrollo publica una nueva versión del buscador de viajes en preproducción. ¿Qué hacéis?

3. Un evaluador marca 1.2.2 Subtítulos (grabados) como «cumple» en la página de horarios, que no tiene vídeo. ¿Es correcto?

4. El desarrollador del autocompletado dice que el fallo con VoiceOver «es un error de Apple» y que su código sigue el patrón de la APG (se abre en una ventana nueva). ¿Cómo lo registras?

5. Marketing quiere anunciar «Nuestra web es accesible al 92 %». ¿Qué le recomiendas?

Lista de comprobación

• El alcance indica qué entra, qué queda fuera y por qué.
• El nivel objetivo y los requisitos adicionales están por escrito.
• La línea base refleja al público y tiene versiones fijadas.
• Tengo datos de prueba para todos los procesos antes de empezar.
• El inventario cubre plantillas, componentes, terceros, documentos y procesos.
• He explorado también el área privada y la versión móvil.
• Cada elemento de la muestra tiene su motivo de inclusión.
• Los procesos están completos, de la primera pantalla a la confirmación.
• La muestra aleatoria es de un 10 % aproximado y se eligió al azar.
• Evalúo primero los componentes globales.
• Uso cinco resultados y no dejo nada «no comprobado» sin explicar.
• Cada hallazgo indica página o estado, criterio, combinación y evidencia.
• He comparado la muestra aleatoria y documentado cualquier ampliación.
• La declaración de evaluación no promete más de lo evaluado.

Para seguir aprendiendo

• WCAG Evaluation Methodology (WCAG-EM) (W3C): el texto completo de la metodología en su versión vigente (2.0, julio de 2026), con sus cinco pasos y subpasos y el enlace a la versión 1.0 de 2014.
• WCAG-EM Report Tool (W3C WAI): asistente que guía por los cinco pasos y genera el informe, también en formato legible por máquina.
• Understanding Conformance (W3C WAI): requisitos de conformidad, compatibilidad con la accesibilidad y conformidad parcial.
• ACT Rules (W3C WAI): reglas de prueba revisadas que ayudan a que distintos auditores lleguen al mismo resultado.
• Decisión de Ejecución (UE) 2018/1524 (EUR-Lex): el método de seguimiento de la accesibilidad de los sitios web del sector público.