Nivel 4: Auditoría y evaluación WCAG 2.2 · Proyecto final

Proyecto final: auditoría WCAG 2.2 AA del portal del Ayuntamiento de Valdecierzo

Para terminar el nivel 4 auditas de principio a fin una web realista y redactas el informe, como en un encargo profesional. Así demuestras que sabes aplicar lo aprendido, no solo responder preguntas. Es requisito para el examen del nivel.

20 comprobaciones autocorregibles
Superar 16 de 20
Informe de al menos 400 palabras
Rúbrica de 7 criterios

El encargo

El Ayuntamiento de Valdecierzo (municipio ficticio de unos 18.000 habitantes) te encarga la auditoría de su nuevo portal municipal antes de publicarlo. El alcance es la versión de preproducción completa: las cuatro secciones (Inicio, Reservar instalación, Precios públicos y Contacto) y el proceso de solicitud de reserva, frente a las WCAG 2.2 de nivel AA y con correspondencia con la UNE-EN 301 549 v3.2.1. Tienes diez días hábiles. El Ayuntamiento usará tu informe para encargar las correcciones a su proveedor y para redactar la declaración de accesibilidad que exige el RD 1112/2018.

Cómo hacerlo

Define el alcance y la muestra. Anota el nivel objetivo, la línea base (sistema, navegador y tecnología de apoyo con su versión) y la muestra: cada sección y los estados que vas a provocar (menú y buscador en uso, formulario vacío, con errores y enviado, preguntas abiertas, tabla filtrada y paginada, mapa con el foco, cada vista a 320 px). Explica si procede una muestra aleatoria.
Pasa una herramienta automática (axe DevTools o WAVE) en cada sección. Recuerda que solo analiza lo que está visible en ese momento: muestra cada sección y cada estado antes de ejecutarla. Verifica cada resultado y anota lo que la herramienta no puede ver.
Recorre todo con el teclado: Tab, Mayús+Tab, Intro, Espacio, flechas y Escape. Comprueba el foco visible, el orden, las trampas y qué ocurre con el foco y con el título al cambiar de sección.
Usa un lector de pantalla (NVDA o VoiceOver) y el árbol de accesibilidad del inspector: nombres, funciones y estados de los controles, etiquetas, alternativas de las imágenes, estructura de la tabla, mensajes e idioma.
Prueba el formulario: envíalo vacío, con «1234» en el DNI y «ana@correo» en el correo, y bien relleno.
Revisa lo visual: mide contrastes de texto y de componentes con un analizador, comprueba el uso del color, el zoom al 200 %, el reajuste a 320 px CSS (verifica window.innerWidth), el espaciado de texto, el tamaño de los objetivos y el contenido en movimiento.
Registra cada hallazgo con identificador, título, criterio principal y secundarios, requisito de la EN 301 549, ubicación, pasos, resultado esperado y observado, evidencia medible, a quién afecta, severidad y recomendación con criterio de aceptación. Un hallazgo es un problema: agrupa por componente.
Responde las 20 comprobaciones de esta página: cada una apunta a una zona concreta y se corrige al momento. Ojo: algunas zonas cumplen.
Redacta el informe: datos del encargo, resumen ejecutivo para la dirección, alcance y método, muestra, resultados por criterio, hallazgos, lo que cumple, priorización y plan de corrección, limitaciones y conclusión con la situación de cumplimiento que propones.
Entrégalo para su corrección con la rúbrica. Cada criterio de la rúbrica se puntúa así: insuficiente, del 0 al 40 % de su peso; adecuado, del 50 al 75 %; excelente, del 85 al 100 %. Después compara tu trabajo con el informe modelo y con el ejemplo de corrección.

La web que vas a auditar

Revísala aquí o ábrela en una pestaña nueva (se abre en una pestaña nueva) para usar el teclado, el zoom, el lector de pantalla y tus herramientas con comodidad. Es una web ficticia creada para el proyecto.

Haz el proyecto

Las comprobaciones y la entrega del informe son para quien tiene el acceso al nivel 4. Más abajo puedes ver la rúbrica con la que se evalúa el informe y un ejemplo de corrección.

Iniciar sesión o conseguir el acceso

Rúbrica de evaluación del informe

Criterio	Insuficiente	Adecuado	Excelente
Alcance, muestra y línea base 10 puntos	No indica el nivel objetivo ni qué vistas y estados se evaluaron, o la muestra deja fuera el proceso de reserva o estados clave (errores, envío, 320 px). No hay línea base.	Indica WCAG 2.2 AA, las cuatro vistas y el proceso de reserva, y una línea base con al menos un lector de pantalla y un navegador, pero faltan estados concretos, versiones o la justificación de la muestra aleatoria.	Presenta la muestra en una tabla con cada vista y estado y su motivo de inclusión, el proceso completo, una línea base con sistemas, navegadores, tecnologías de apoyo y versiones, y explica por qué no procede la muestra aleatoria.
Método y herramientas 10 puntos	Solo cita una herramienta automática o presenta su salida o su puntuación como resultado de la auditoría; no describe pruebas manuales.	Describe pruebas automáticas y manuales (teclado, lector de pantalla, contraste, 320 px), pero sin versiones o sin explicar cómo se verificaron los resultados automáticos.	Sigue los pasos de WCAG-EM, documenta herramientas y versiones y qué se probó con cada combinación, y señala qué hallazgos solo se detectaron manualmente (por ejemplo, el alt «plano» o la trampa del mapa).
Identificación y descripción de hallazgos 25 puntos	Detecta menos de 9 de los 15 fallos del sitio o incluye fallos inexistentes; los hallazgos no indican criterio, ubicación o evidencia.	Detecta entre 9 y 12 fallos con criterio y ubicación; algunos carecen de pasos, de medición (ratio de contraste, píxeles) o tienen el criterio mal asignado.	Detecta 13 o más fallos sin falsos positivos; cada uno tiene criterio principal y secundarios correctos, requisito de la EN, ubicación, pasos, resultado esperado y observado, evidencia medible y a quién afecta.
Severidad y priorización 15 puntos	No asigna severidad o la asigna de forma incoherente (la trampa del mapa como baja, el idioma de un párrafo como crítica); el plan sigue el orden de los criterios o de las páginas, o no hay plan.	Usa una escala de cuatro niveles razonable en la mayoría de los hallazgos, con algún desajuste sin justificar; propone fases pero sin tener en cuenta la frecuencia o el esfuerzo.	Justifica cada severidad en una frase según la tarea y las personas afectadas, prioriza por impacto, frecuencia y esfuerzo, y propone fases con responsables y una alternativa provisional para lo crítico.
Recomendaciones de corrección 15 puntos	Las recomendaciones son genéricas («mejorar la accesibilidad», «añadir ARIA») o copian el texto de la herramienta.	Cada hallazgo tiene una recomendación concreta, pero falta el código, dónde se corrige o un criterio de aceptación comprobable.	Cada recomendación fija el resultado esperado, propone la solución nativa más sencilla con código correcto, indica el componente que se corrige y termina con un criterio de aceptación verificable.
Redacción para dirección y equipo técnico 15 puntos	No hay resumen ejecutivo o es una lista de criterios; usa afirmaciones absolutas («el sitio es inaccesible») o puntuaciones automáticas, las cifras no cuadran o el documento no tiene estructura.	El resumen ejecutivo da el estado y las cifras y los hallazgos se entienden, pero no describe las barreras como tareas que no pueden hacer personas concretas o mezcla registros.	Resumen de una página con estado, cifras coherentes con la hoja de hallazgos, 3-5 barreras descritas como tareas, primeros pasos e implicaciones legales; parte técnica impersonal, con vocabulario constante y documento accesible (encabezados, tablas con th).
Conclusiones, conformidad y limitaciones 10 puntos	No concluye, concluye que cumple o da un porcentaje de accesibilidad; no menciona limitaciones.	Concluye que no hay conformidad AA y cita limitaciones generales, pero no relaciona el resultado con la EN 301 549 ni propone una situación para la declaración.	Concluye la no conformidad AA sobre la muestra y fechas, propone una situación de cumplimiento con el cálculo de requisitos de la EN, separa 2.5.8 como «solo WCAG 2.2» y enumera límites concretos.

Ejemplo de corrección con la rúbrica

Fragmento del informe de una alumna

Resumen ejecutivo. El portal del Ayuntamiento de Valdecierzo es inaccesible para las personas con discapacidad. Hemos encontrado 11 errores. Lighthouse le da una puntuación de accesibilidad de 87, por lo que el portal cumple aproximadamente un 70 % de las WCAG. Recomendamos corregir los errores lo antes posible para evitar sanciones.

Alcance y método. He revisado las cuatro secciones del portal con Chrome, NVDA, axe DevTools y Lighthouse. También he probado el teclado y el zoom.

Hallazgos.

Mapa de contacto. Al llegar al mapa con el teclado no se puede salir con Tab. Criterio: 2.1.1 Teclado. Severidad: alta. Recomendación: revisar el JavaScript del mapa.

Selector de instalación. Las tarjetas de instalación son div sin tabindex ni rol. Pasos: en «Reservar instalación», tabular desde el campo Teléfono; el foco salta a Fecha y no se puede elegir instalación, que es obligatoria, así que la solicitud no se puede enviar sin ratón. Criterios: 2.1.1 Teclado y 4.1.2 Nombre, función, valor. Severidad: crítica, porque bloquea el proceso de reserva. Recomendación: sustituirlas por input type="radio" dentro de un fieldset con legend «Instalación (obligatorio)», manteniendo el aspecto de tarjeta con CSS. Criterio de aceptación: se elige una instalación con Tab y flechas y NVDA anuncia «botón de opción, no marcado, 1 de 4».

Pie de página. El texto del pie tiene poco contraste. Criterio: 1.4.3. Severidad: media. Recomendación: usar un gris más oscuro.

Errores del formulario. Al enviar con errores, los campos se marcan en rojo. Criterio: 1.4.1 Uso del color. Severidad: alta. Recomendación: añadir aria-invalid.

Información para extranjeros. El párrafo en inglés no tiene lang. Criterio: 3.1.2 Idioma de las partes. Severidad: crítica, porque una persona ciega no entenderá el texto.

Tabla de precios. La primera fila usa td en lugar de th y NVDA no anuncia el encabezado de columna al moverse con Ctrl+Alt+flechas. Criterio: 1.3.1 Información y relaciones. Severidad: media. Recomendación: th scope="col" en la primera fila y caption.

Campo Teléfono. axe indica que el campo no tiene etiqueta. Criterio: 1.3.1. Severidad: media. Recomendación: usar label for="telefono".

Avisos de la portada. La banda se mueve continuamente y no se puede parar. Criterio: 2.2.2 Pausar, detener, ocultar. Severidad: alta. Recomendación: añadir un botón de pausa.

Foco. El sitio no tiene foco visible. Criterio: 2.4.7. Severidad: alta. Recomendación: no quitar el outline.

Paginación. Los botones miden 18 × 18 px. Incumple el requisito 9.2.5.8 de la EN 301 549. Severidad: media.

Imágenes. Todas las imágenes tienen texto alternativo, porque axe no da errores de imágenes.

Conclusión. El sitio es parcialmente accesible y cumple el 70 % de los criterios.

Corrección con la rúbrica

Puntuación por criterio de la rúbrica
Criterio (peso)	Nivel	Puntos	Comentario del corrector
Alcance, muestra y línea base (10)	Insuficiente	3	Nombra las cuatro secciones, pero no el nivel objetivo, ni los estados evaluados (formulario con errores y enviado, tabla filtrada, 320 px), ni versiones. Falta decir por qué no hay muestra aleatoria.
Método y herramientas (10)	Adecuado	6	Combina herramientas, teclado y NVDA, pero no da versiones ni dice cómo verificó la salida de axe. El hallazgo 11 muestra el riesgo: dar por buena una imagen porque la herramienta no protesta.
Identificación y descripción (25)	Adecuado	15	Detecta 10 de los 15 fallos. Le faltan el alt «plano» (1.1.1), el título que no cambia (2.4.2), la confirmación no anunciada (4.1.3), las preguntas sin rol ni estado (4.1.2) y los accesos rápidos a 320 px (1.4.10). La trampa del mapa es 2.1.2, no 2.1.1 (el mapa sí se maneja con flechas); los errores tienen como criterio principal 3.3.1; «no tiene foco visible» generaliza: solo falla el menú. El contraste no da la medición (3,08:1, #8A8A8A sobre #F2F2F2). El hallazgo 2 es un buen modelo.
Severidad y priorización (15)	Insuficiente	5	La trampa del mapa es crítica (bloquea la página y es de no interferencia), no alta; el párrafo sin lang es baja: el texto se oye, aunque con mala pronunciación. No hay plan por fases ni orden por impacto, frecuencia y esfuerzo.
Recomendaciones (15)	Adecuado	8	Las de los hallazgos 2, 6 y 7 son concretas y la 2 incluye criterio de aceptación. «Revisar el JavaScript», «un gris más oscuro» o «añadir aria-invalid» no dicen qué conseguir ni cómo comprobarlo; para los errores falta el texto asociado al campo.
Redacción (15)	Insuficiente	5	«Inaccesible» es una afirmación absoluta, la puntuación de Lighthouse no mide la conformidad y «evitar sanciones» es alarmista. El resumen no dice qué tareas no pueden hacer qué personas (por ejemplo, reservar sin ratón). Los hallazgos sí son impersonales y legibles.
Conclusiones y limitaciones (10)	Insuficiente	2	Un porcentaje no es un veredicto: el portal no es conforme con WCAG 2.2 AA. No propone situación para la declaración, cita un requisito 9.2.5.8 que no existe en la EN 301 549 v3.2.1 (2.5.8 es solo WCAG 2.2) y no menciona limitaciones.

Nota final: 44 sobre 100. Lo prioritario para la siguiente entrega: verificar manualmente lo que la herramienta no ve, revisar la asignación de criterios con la tabla de diagnóstico diferencial, justificar cada severidad con la tarea afectada y sustituir las cifras automáticas por un veredicto de conformidad y una situación de cumplimiento razonada.

El informe modelo de esta auditoría se muestra al entregar el proyecto, para que no condicione el tuyo.