En el Módulo 5 cerramos con una duda incómoda: ya sabemos construir componentes accesibles —un acordeón con aria-expanded, un modal con focus trap, un vídeo con <track>—, pero ¿realmente funcionan? Un aria-expanded que no se sincroniza, una trampa de foco con fuga o un alt que suena raro en NVDA no los descubre el código: los descubre alguien probando. Este módulo es la fase de verificación, y empieza por lo más barato y lo más revelador: probar a mano, tú mismo, sin licencias caras. En esta lección aprenderás a auditar la ficha de curso de Cursalia usando solo tu teclado, un lector de pantalla gratuito, el zoom del navegador y las DevTools.

1. Por qué empezar por lo manual
2. Prueba solo con teclado
3. Prueba con lector de pantalla para desarrolladores
4. Prueba de zoom y reflow
5. Verificación de estructura con DevTools
6. Comprobación manual de contraste
7. El patrón "primer criterio que revientan las prisas"
8. Checklist manual reutilizable

Las herramientas automáticas (que veremos en la lección 06-02) detectan solo un 30-40% de los problemas: ven que falta un alt, pero no si el texto del alt tiene sentido. Las pruebas manuales cubren el juicio humano que ninguna máquina tiene: ¿el orden de foco es lógico?, ¿el nombre accesible describe lo que hace el botón?, ¿el foco visible se ve de verdad?. Y no necesitas más que lo que ya tienes en tu equipo.

La regla mental: si tú no puedes usar la página con el teclado y con un lector de pantalla, tu usuario tampoco.

Guarda el ratón en un cajón. Muchos usuarios (Lucía, con movilidad reducida) navegan solo con teclado. Las teclas fundamentales:

Abre la ficha del curso "Python desde cero" y, sin tocar el ratón, comprueba:

• Foco visible: en cada Tab, ¿ves claramente dónde está el foco? Si el diseño hizo outline: none sin sustituto, este es el fallo número uno (WCAG 2.4.7 Foco visible; y 2.4.11 Foco no oculto en WCAG 2.2).
• Orden lógico: el foco debe seguir el orden de lectura: cabecera → migas de pan → título → botón "Matricularme" → pestañas de descripción/temario/opiniones → footer. Un tabindex positivo suele romperlo.
• Sin trampas de teclado: entra en el reproductor de vídeo o en el modal de matrícula. ¿Puedes salir con Tab o Esc, o te quedas "atrapado"? (WCAG 2.1.2 Sin trampas para el foco del teclado).
• Skip link: al pulsar Tab nada más cargar, ¿aparece un enlace "Saltar al contenido"? Debe hacerse visible al recibir foco y llevar al <main>.
• Operar el filtro del catálogo: los checkboxes de categoría y el selector de nivel deben marcarse con Espacio/flechas y aplicar sin necesidad de clic.
• Operar el modal de matrícula: al abrirlo, el foco debe entrar en el modal; Esc lo cierra; y el foco debe volver al botón que lo abrió.

Consejo: recorre la página entera dos veces, hacia delante y hacia atrás. Muchas trampas solo aparecen con Shift+Tab.

No hace falta ser experto para detectar problemas gordos. Marta usa NVDA a diario; tú puedes arrancarlo 10 minutos y aprender mucho.

• Windows: instala NVDA (gratuito, nvaccess.org). Arranca con Ctrl+Alt+N. La tecla Insert es la "tecla NVDA".
• Mac: VoiceOver ya viene incluido. Actívalo con Cmd+F5. La combinación Ctrl+Opt es la "tecla VO".

Comandos básicos para desarrolladores:

• Navega por encabezados (H): ¿el <h1> es el título del curso? ¿La jerarquía baja de forma lógica (h1 → h2 → h3) sin saltos?
• Navega por landmarks (D): ¿se anuncian banner, navigation, main, contentinfo?
• Ve al botón "Matricularme": ¿NVDA lee un nombre accesible claro ("Matricularme en Python desde cero, botón") o solo "botón" sin más?
• Escucha las imágenes: el alt de la foto del profesor, ¿suena natural o dice "IMG_2043.jpg"?
• Abre el acordeón de temario: al expandir, ¿anuncia "expandido/contraído"? Aquí compruebas el aria-expanded del Módulo 5 sonando de verdad.

Cierra los ojos un minuto y trata de completar la matrícula solo con oído. Es incómodo, y esa incomodidad es exactamente el hallazgo.

Sofía tiene baja visión y navega con zoom. Dos comprobaciones distintas:

• Zoom del navegador al 200% (Ctrl/Cmd + +): WCAG 1.4.4 (Redimensionamiento de texto) exige que el texto escale al 200% sin pérdida de contenido ni funcionalidad. Sube hasta el 400%.
• Reflow a 320px (WCAG 1.4.10 Reflujo): reduce la ventana a 320 CSS px de ancho (o zoom 400% en 1280px) y comprueba que no aparece scroll horizontal y que nada se solapa ni se corta. El contenido debe "reflowar" a una sola columna.

Qué falla típicamente en Cursalia: la barra de filtros que se sale por la derecha, el precio que se superpone al botón, o un texto en píxeles fijos que no crece. Si necesitas hacer scroll en dos direcciones para leer un párrafo, es un fallo. (El cómo se arregla —unidades relativas, media queries— está en el Módulo 4).

No necesitas nada externo: el navegador ya inspecciona el árbol de accesibilidad (el que vimos en el Módulo 2).

• Chrome/Edge: DevTools → pestaña Elements → panel Accessibility. Selecciona el botón "Matricularme" y lee su Computed name, su Role y sus estados. Ahí ves si el nombre accesible que oíste en NVDA viene del texto, de un aria-label o de un <label>.
• Firefox: DevTools → pestaña Accessibility. Tiene comprobaciones integradas de contraste y de teclado, y muestra el árbol como lista navegable.

Comprueba la estructura de encabezados y landmarks de forma visual: un árbol con un solo main, un h1 único y una jerarquía sin saltos. Si el árbol muestra un botón "sin nombre" (name vacío), acabas de encontrar lo que en NVDA sonaba a "botón" pelado.

Para un caso puntual —el precio en gris claro sobre blanco, el texto del botón— no hace falta escanear toda la página. Usa el cuentagotas de contraste de las DevTools (Chrome muestra el ratio al inspeccionar color, con un ✓/✗ frente a AA/AAA) o un color picker que dé el ratio. Recuerda los umbrales del Módulo 4:

• Texto normal: 4.5:1 (AA).
• Texto grande (≥24px, o ≥18.66px en negrita): 3:1 (AA).
• Componentes de interfaz y estados de foco: 3:1 (WCAG 1.4.11 Contraste no textual).

Cuando un equipo va con prisa, casi siempre cae lo mismo primero. Ténlo en el radar:

1. Foco visible eliminado (outline: none "porque quedaba feo").
2. Botones sin nombre accesible (iconos sin texto: la lupa de buscar, la X de cerrar).
3. Imágenes con alt vacío o basura en imágenes informativas.
4. Orden de foco roto por tabindex positivos o por maquetar moviendo el orden visual con CSS.
5. Modal sin gestión de foco (no entra, no atrapa, no devuelve).

Si solo tienes 15 minutos, revisa estos cinco: son los que más usuarios afectan por menos esfuerzo.

Guarda esta checklist como plantilla: es tu primera línea de defensa antes de tocar cualquier herramienta automática.

• Probar con ratón "por costumbre": si tocas el ratón, ya no estás haciendo prueba de teclado. Sé estricto.
• Confundir "yo, desarrollador, con NVDA" con "un usuario real de NVDA": tú sabes dónde está todo. Esto detecta fallos técnicos, no de usabilidad (eso es la lección 06-03).
• Probar solo el "camino feliz": prueba también errores de formulario, estados vacíos y el modal abierto/cerrado varias veces.
• Fiarte del foco en un solo navegador: el foco visible y el reflow varían; revisa al menos Chrome y Firefox.
• Consejo: automatiza lo repetitivo (06-02) y reserva tu tiempo manual para el juicio (orden, nombres, sentido del alt).

Ejercicio 1. Recorres con Tab la ficha de curso de Cursalia y detectas que, al abrir el modal de matrícula, el foco no entra en él y sigue detrás, en la página. ¿Qué criterio WCAG se incumple y a qué personas afecta más?

Ejercicio 2. Con NVDA navegas por encabezados (H) en el catálogo y oyes: h1, luego h3, luego h2. ¿Qué problema hay y por qué importa para Marta?

Ejercicio 3. Diseña una mini-sesión de 15 minutos para revisar el reproductor de vídeo de Cursalia solo con teclado y lector de pantalla. Lista 4 comprobaciones concretas.

Solución 1. Se incumple 2.4.3 Orden del foco (y la gestión de foco del patrón modal del Módulo 5): al abrir el modal el foco debe moverse a él. Afecta sobre todo a Lucía (solo teclado) y a Marta (lector de pantalla), que quedan "fuera" del diálogo sin saber que se ha abierto. El arreglo está en el patrón de modal del Módulo 5.

Solución 2. Hay un salto de nivel de encabezado (h1 → h3 → h2): la jerarquía no es coherente. Incumple el uso correcto de encabezados (1.3.1 Información y relaciones). Marta usa los encabezados como índice para saltar por la página; una jerarquía rota le da un mapa mental equivocado de la estructura.

Solución 3. Ejemplo: (1) ¿Se llega al botón Play con Tab y se activa con Enter/Espacio? (2) ¿Los controles (volumen, subtítulos, barra de tiempo) son operables por teclado y anuncian su nombre en NVDA? (3) ¿El botón de subtítulos anuncia su estado activado/desactivado? (4) ¿El foco es visible sobre los controles y no queda atrapado dentro del vídeo?

Las pruebas manuales son tu red de seguridad más barata y más honesta: con teclado, lector de pantalla, zoom y DevTools detectas la mayoría de los problemas graves antes de escribir una línea de test. Pero son lentas y dependen de tu disciplina. En la siguiente lección, 06-02 Herramientas de Pruebas Automatizadas, veremos cómo delegar en máquinas la parte repetitiva y objetiva —recordando siempre que lo automático solo cubre un 30-40% y jamás sustituye a lo que acabas de aprender aquí.