Has recorrido las tres capas de evaluación: automática (06-02), manual (06-01) y con usuarios reales (06-03). El resultado es un montón de hallazgos heterogéneos: violaciones de axe, notas de tu checklist manual, citas de Marta, tiempos de Lucía. Ahora viene la parte que separa una auditoría útil de un PDF que nadie lee: interpretar esos resultados y actuar sobre ellos con criterio. Un informe con 200 hallazgos sin prioridad paraliza; uno con 6 hallazgos bien ponderados y convertidos en tareas mueve el producto. En esta lección aprenderás a leer un informe, entender severidad e impacto, priorizar, descartar falsos positivos y cerrar el círculo para que los problemas no vuelvan.
Contenido
- Anatomía de un hallazgo
- Severidad frente a impacto en el usuario
- Priorizar: no todo es urgente
- VPAT / ACR: el informe de conformidad
- Descartar falsos positivos
- De hallazgo a tarea de remediación con "criterio de hecho"
- Informe de auditoría de Cursalia (ejemplo)
- Prevenir regresiones: accesibilidad en la Definition of Done
- Anatomía de un hallazgo
Un hallazgo bien documentado —venga de una herramienta o de una sesión con usuarios— tiene siempre estos campos. Si un informe no los trae, exígelos: sin ellos no se puede actuar.
| Campo | Qué dice | Ejemplo en Cursalia |
|---|---|---|
| Criterio WCAG | Qué pauta se incumple | 4.1.2 Nombre, función, valor |
| Nivel | A / AA / AAA | A |
| Ubicación | Dónde ocurre (página + selector) | Catálogo, button.fav-btn |
| Severidad / impacto | Cuánto daña al usuario | Crítico (bloqueante) |
| Evidencia | Prueba: captura, cita, salida de la herramienta | "NVDA lee 'botón' sin nombre" |
| Recomendación | Qué hacer (no cómo obligatoriamente) | Dar nombre accesible al icono |
| Origen | De qué prueba salió | axe-core + confirmado a mano |
El campo origen importa más de lo que parece: un hallazgo que aparece en axe y en una sesión con usuarios es incuestionable; uno que solo salió de una herramienta puede ser un falso positivo (sección 5).
- Severidad frente a impacto en el usuario
Cuidado con confundir dos cosas:
- Severidad técnica (la que asigna la herramienta): axe dice "crítico/serio/moderado/menor" según su catálogo de reglas. Es genérica, no conoce tu producto.
- Impacto en el usuario: cuánto daño real causa en tu contexto. Depende de si bloquea una tarea y de a cuánta gente afecta.
Un modelo simple para clasificar el impacto:
| Nivel | Significado | Ejemplo |
|---|---|---|
| Bloqueante | Impide completar una tarea esencial | Marta no puede saber si se matriculó (06-03) |
| Serio | Se puede completar, pero con gran esfuerzo/frustración | Lucía tarda el triple por el foco que salta |
| Menor | Molesta, no impide nada | Un alt redundante en un icono decorativo |
La clave: un fallo que axe marca como "moderado" puede ser bloqueante en tu producto si cae en el botón de matrícula, y uno "crítico" de axe puede ser menor si está en una página que nadie visita. La severidad de la herramienta es el punto de partida, no la sentencia.
- Priorizar: no todo es urgente
Priorizar es ponderar impacto × alcance. Dos ejes:
- Gravedad para quien lo sufre: ¿bloqueante, serio o menor? (sección 2).
- Alcance: ¿en cuántas páginas aparece y con qué frecuencia se usan? Un fallo en la ficha de curso y el catálogo (las páginas más visitadas de Cursalia) afecta a casi todos los usuarios; el mismo fallo en la página "Aviso legal" afecta a poquísimos.
quadrantChart
title Priorización de hallazgos
x-axis "Poco usada" --> "Muy usada"
y-axis "Impacto menor" --> "Impacto bloqueante"
quadrant-1 "ARREGLAR YA"
quadrant-2 "Planificar"
quadrant-3 "Backlog"
quadrant-4 "Rápidas si son baratas"
"Éxito matrícula no anunciado": [0.9, 0.95]
"Foco salta al filtrar": [0.85, 0.6]
"Botón favorito sin nombre": [0.8, 0.5]
"Contraste precio 4.35:1": [0.75, 0.45]
"alt vacío en decorativa": [0.3, 0.15]
Regla práctica: primero lo bloqueante en páginas muy usadas; deja para el final lo menor en páginas marginales. Y si algo es trivial de arreglar (5 minutos) aunque sea menor, hazlo ya: sale gratis.
- VPAT / ACR: el informe de conformidad
Cuando una organización (o un cliente que va a comprar Cursalia) quiere saber "oficialmente" cómo de accesible es, se usa un documento estándar:
- VPAT (Voluntary Product Accessibility Template): la plantilla, publicada por el ITI. Es el formato en blanco.
- ACR (Accessibility Conformance Report): el VPAT ya rellenado para tu producto — el informe resultante.
Recorre criterio por criterio (WCAG, y a veces la norma EN 301 549 europea o la Sección 508 de EE. UU.) y marca cada uno con un nivel de soporte:
| Estado en el ACR | Significado |
|---|---|
| Supports | Se cumple |
| Partially Supports | Se cumple con excepciones |
| Does Not Support | No se cumple |
| Not Applicable | No aplica a este producto |
Para qué sirve: es el documento que un comprador (una universidad, una empresa) pide antes de contratar un e-learning. Un ACR honesto —que reconoce sus "Partially Supports"— genera más confianza que uno que jura "Supports" en todo. No lo confundas con el informe de auditoría interno (secciones 1-3): el ACR es de cara a terceros; la auditoría es tu lista de trabajo.
- Descartar falsos positivos
Antes de crear tareas, filtra el ruido (lo vimos en 06-02):
- Reproduce el hallazgo a mano: si axe marca "contraste bajo" en un texto que resulta estar oculto o sobre imagen decorativa, no es un problema real.
- Verifica el contexto: un
aria-*marcado como inválido puede ser correcto para tu patrón concreto. - Cruza orígenes: si algo aparece en la herramienta pero ni tú a mano ni los usuarios lo notáis, sospecha. Si aparece en varios orígenes, es sólido.
Documenta por qué descartas cada falso positivo. Un hallazgo silenciado sin justificación se convierte, meses después, en "¿por qué ignoramos esto?".
- De hallazgo a tarea de remediación con "criterio de hecho"
Un hallazgo no es accionable hasta que es una tarea con un criterio de "hecho" (definition of done) verificable. Compara:
- Mal (no accionable): "Mejorar accesibilidad del catálogo".
- Bien (accionable): "Dar nombre accesible al botón de favorito (
button.fav-btn). Hecho cuando: NVDA anuncia 'Añadir a favoritos, botón' y axe ya no reportabutton-name."
El criterio de "hecho" debe decir cómo se comprueba y con qué prueba (automática, manual o de usuario), cerrando el círculo con las tres lecciones anteriores.
- Informe de auditoría de Cursalia (ejemplo)
Auditoría combinada de Cursalia (axe + checklist manual de 06-01 + sesión con usuarios de 06-03). Hallazgos priorizados:
| # | Hallazgo | WCAG (nivel) | Origen | Impacto | Alcance | Prioridad |
|---|---|---|---|---|---|---|
| 1 | El mensaje de matrícula con éxito no se anuncia (sin región en vivo) | 4.1.3 (AA) | Usuarios (Marta) | Bloqueante | Flujo de compra | P1 |
| 2 | Foco salta al inicio de la lista al aplicar filtro | 2.4.3 (A) | Usuarios (Lucía) | Serio | Catálogo | P1 |
| 3 | Botón "favorito" (icono) sin nombre accesible | 4.1.2 (A) | axe + manual | Serio | Catálogo, ficha | P2 |
| 4 | Contraste del precio 4.35:1 (< 4.5:1) | 1.4.3 (AA) | axe + Pa11y | Serio | Ficha de curso | P2 |
| 5 | Botón sticky tapa el precio a zoom 300% | 1.4.10 (AA) | Usuarios (Sofía) | Serio | Ficha de curso | P2 |
| 6 | alt redundante en icono decorativo del footer |
1.1.1 (A) | axe (alerta) | Menor | Todas | P3 |
Plan de remediación, cada hallazgo mapeado a la lección del curso donde está la solución:
| # | Tarea | Criterio de "hecho" | Se arregla con (lección) |
|---|---|---|---|
| 1 | Anunciar el resultado de la matrícula a lectores de pantalla | NVDA lee el mensaje de éxito al confirmar | Contenido dinámico / regiones en vivo — Módulo 7 |
| 2 | No mover el foco al inicio al filtrar | Con teclado, el foco permanece donde estaba tras filtrar | Gestión de foco — Módulo 5 (05-01/05-02) |
| 3 | Nombre accesible al botón de favorito | NVDA anuncia "Añadir a favoritos"; axe sin button-name |
Alternativas de texto / ARIA — Módulo 4-5 |
| 4 | Subir el contraste del precio a ≥ 4.5:1 | DevTools marca ✓ AA; Pa11y sin error de contraste | Contraste y color — Módulo 4 (04-04) |
| 5 | Evitar la superposición sticky a zoom alto | A 300-400% el precio se lee sin quedar tapado | Redimensionado / reflow — Módulo 4 (04-04) |
| 6 | Marcar el icono como decorativo (alt="") |
El lector lo ignora; desaparece la alerta | Alternativas de texto — Módulo 5 (05-04) |
Observa dos cosas: los tres hallazgos más graves (P1) salieron de usuarios y de lo manual, no de la herramienta — justo el mensaje del módulo. Y cada tarea remite a dónde ya aprendiste a arreglarla: la evaluación cierra el bucle con la construcción.
- Prevenir regresiones: accesibilidad en la Definition of Done
Arreglar los 6 hallazgos no sirve de nada si dentro de dos sprints vuelven. Para que no regresen, la accesibilidad entra en la Definition of Done del equipo: una historia no está "terminada" hasta que cumple criterios de accesibilidad. Ejemplo de checklist de DoD para Cursalia:
DEFINITION OF DONE — Accesibilidad
[ ] Linter jsx-a11y sin errores (06-02)
[ ] Tests axe-core en CI en verde para las páginas tocadas (06-02)
[ ] Checklist manual de teclado + lector pasada en el componente nuevo (06-01)
[ ] Foco visible y orden de foco correctos (06-01)
[ ] Sin regresiones en criterios ya conformes del ACR (06-04)
[ ] Hallazgos de usuarios abiertos: ninguno P1/P2 sin resolver (06-03)Así se cierra el círculo de todo el Módulo 6: automático para no regresar, manual para el juicio, usuarios para la usabilidad, e informe para priorizar y verificar. La accesibilidad deja de ser una auditoría puntual y se vuelve parte del proceso.
Errores Comunes y Consejos
- Tratar la severidad de la herramienta como verdad absoluta: pondérala por impacto real y alcance en tu producto.
- Priorizar por "lo fácil" en vez de por impacto: arreglar 20 cosas menores mientras un bloqueante sigue vivo es mala gestión (salvo que lo menor sea trivial: eso sí, cae).
- Confundir ACR con auditoría interna: el ACR es para terceros; la auditoría es tu backlog. No mezcles.
- Cerrar tareas sin criterio de "hecho": "ya lo miré" no es done. Define cómo se verifica y con qué prueba.
- No documentar falsos positivos: se reabren eternamente.
- Arreglar y no blindar: sin accesibilidad en la Definition of Done, todo regresa.
- Consejo: en el informe, ordena por prioridad y pon el impacto en el usuario en lenguaje humano ("Marta no sabe si se ha matriculado"), no solo el código WCAG. Convence más y prioriza mejor.
Ejercicios
Ejercicio 1. axe marca como "crítico" un alt ausente en un icono decorativo del footer (aparece en todas las páginas) y como "serio" que el mensaje de matrícula con éxito no se anuncie (solo en el flujo de compra). Según tu criterio de impacto, ¿cuál priorizas y por qué la severidad de la herramienta aquí engaña?
Ejercicio 2. Un cliente universitario pide "el VPAT de Cursalia" antes de contratar. Explica qué le entregas exactamente (VPAT vs ACR), qué estados de conformidad puede tener cada criterio y por qué conviene ser honesto con los "Partially Supports".
Ejercicio 3. Convierte este hallazgo en una tarea accionable con criterio de "hecho": "Contraste del precio insuficiente (4.35:1) en la ficha de curso, WCAG 1.4.3 AA, detectado por Pa11y." Indica también con qué prueba verificarías el arreglo.
Soluciones
Solución 1. Priorizas el mensaje de matrícula no anunciado, aunque axe lo marque "serio" y el alt "crítico". Razón: el mensaje no anunciado es bloqueante —Marta no puede confirmar si se matriculó, en el flujo de compra, que es esencial y muy usado—, mientras que el alt en un icono decorativo es menor (un lector lo ignora sin perder información) por mucho que aparezca en todas las páginas. La severidad de la herramienta es genérica y no sabe qué tarea bloquea cada fallo en tu producto; hay que reinterpretarla por impacto y alcance reales.
Solución 2. Le entregas un ACR: el VPAT (la plantilla del ITI) ya rellenado para Cursalia. Recorre cada criterio WCAG (y posiblemente EN 301 549 / Sección 508) marcándolo como Supports, Partially Supports, Does Not Support o Not Applicable. Conviene ser honesto con los "Partially Supports" porque un ACR realista genera confianza y evita responsabilidad por afirmaciones falsas; jurar "Supports" en todo y que luego el cliente encuentre barreras destruye la credibilidad y puede acarrear consecuencias contractuales/legales.
Solución 3. Tarea: "Ajustar el color del precio en la ficha de curso para alcanzar un contraste ≥ 4.5:1 sobre su fondo (WCAG 1.4.3 AA)." Criterio de "hecho": el cuentagotas de contraste de las DevTools marca ✓ AA para ese texto y Pa11y/axe ya no reportan el error de contraste en #precio-curso. Verificación: prueba automática (Pa11y/axe en CI) más una comprobación manual rápida con el color picker de 06-01. (El cómo ajustar el color es del Módulo 4, lección 04-04.)
Conclusión
Con esta lección cierras el Módulo 6: ya no solo sabes construir interfaces accesibles, sino verificar que lo son y actuar sobre los resultados. Dominas el ciclo completo —automático, manual, usuarios e informe— sobre páginas "normales": una ficha de curso, un catálogo, un formulario de matrícula. Pero la web real es más difícil que eso. ¿Qué pasa cuando el contenido cambia sin recargar y hay que anunciarlo (el hallazgo P1 de Marta apunta justo ahí)? ¿Cuando toda la aplicación es una SPA y la navegación no recarga la página? ¿Cuando Cursalia se traduce a varios idiomas y hay que gestionar lang, dirección del texto y localización? ¿Y hacia dónde va el estándar con WCAG 3.0? Todo eso —interacciones complejas y contenido dinámico, accesibilidad en SPAs, internacionalización/localización y tendencias futuras— es el Módulo 7, donde llevamos lo aprendido al terreno avanzado.
Curso de Accesibilidad Web
Módulo 1: Introducción a la Accesibilidad Web
- ¿Qué es la Accesibilidad Web?
- Importancia de la Accesibilidad Web
- Visión General de las Leyes y Normas de Accesibilidad
- Introducción a WCAG
Módulo 2: Comprensión de Discapacidades y Tecnologías de Asistencia
- Tipos de Discapacidades
- Visión General de Tecnologías de Asistencia
- Cómo las Personas con Discapacidades Usan la Web
Módulo 3: Principios del Diseño Accesible
- Perceptible: Hacer el Contenido Disponible a los Sentidos
- Operable: Interfaz de Usuario y Navegación
- Comprensible: Información y Operación
- Robusto: Compatibilidad con Tecnologías Actuales y Futuras
Módulo 4: Implementación de Accesibilidad en HTML y CSS
- HTML Semántico
- Formularios Accesibles
- Uso de Roles y Propiedades ARIA
- Contraste de Color y Redimensionamiento de Texto
Módulo 5: Accesibilidad en JavaScript y Multimedia
- Creación de Widgets de JavaScript Accesibles
- Accesibilidad del Teclado
- Contenido de Video y Audio Accesible
- Proporcionar Alternativas de Texto para Imágenes
Módulo 6: Pruebas y Evaluación de la Accesibilidad
- Técnicas de Pruebas Manuales
- Herramientas de Pruebas Automatizadas
- Pruebas de Usuario con Tecnologías de Asistencia
- Interpretación de Informes de Accesibilidad
