🌍 WCAG Quest: Maestría
Progreso: Misión 1 de 15
1. El Narrador Invisible
Nivel A¿Qué texto alternativo debe tener un botón con una lupa 🔍? (Debe describir la función)
2. La Gymkana del Teclado
Nivel AAEl foco (TAB) no se ve en los botones. ¿Cuál es la solución más robusta?
3. El Fantasma Gris
Nivel AAEste texto es difícil de leer. ¿Cómo corregirías el contraste 4.5:1 (ratio AA)?
4. El Enlace Misterioso
Nivel A¿Cuál de los siguientes enlaces tiene sentido si se lee fuera de contexto (sin ver el resto de la página)?
5. Etiquetas Rotas
Nivel AEl texto "Nombre" no está asociado al campo. ¿Cómo lo asocias correctamente?
6. El Detective de Errores
Nivel ADespués de un error de envío (Email inválido), ¿qué información debe mostrar la web para ser accesible?
7. La Torre de Babel
Nivel AATexto en inglés dentro de una web en español sin avisar. ¿Cómo se soluciona para los lectores de pantalla?
"Accessibility is essential."
8. La Caja Asfixiante
Nivel AAEl texto se corta al hacer zoom porque la altura es fija (px). ¿Cuál es la corrección WCAG 1.4.4?
9. El Mapa del Tesoro
Nivel ATenemos un salto de <h1> a <h4>. ¿Qué etiqueta de encabezado debe usarse lógicamente después del H1?
10. El Control del Tiempo
Nivel AAALa animación parpadeante distrae. ¿Qué es NECESARIO para cumplir con WCAG 2.2.2?
11. La Trampa del Teclado
Nivel A (Crítico)Estás atrapado con la tecla TAB. ¿Cuál es la solución correcta para WCAG 2.1.2?
12. El Daltónico Confundido
Nivel ASi la información depende solo del color ("Pulsa el botón verde"), ¿cómo se corrige WCAG 1.4.1?
13. El Pergamino Infinito
Nivel AAScroll horizontal a zoom 400%. ¿Cuál es la técnica para evitarlo (WCAG 1.4.10)?
14. El Foco Perdido
Nivel AA15. El Dictado Roto
Nivel ASi el comando de voz es "Clic en Enviar", ¿cómo corregimos el conflicto entre el texto visible y el nombre accesible?
🏆 ¡Certificado WCAG Quest!
¡Felicidades! Has completado las 15 misiones y cubierto los errores más críticos de accesibilidad web.