Lección 10 de 47 ≈ 70 min Construcción profesional Codex + GPT-5.6 Sol
Resultado visible
La web seguirá siendo comprensible con pantalla estrecha, zoom, teclado y tecnologías de asistencia. No crearás una «versión accesible» separada.
Lista de implementación
- HTML semántico y un solo
h1descriptivo por página; - regiones
header,nav,mainyfooter; - controles nativos antes que imitaciones con
div; - etiqueta visible para cada campo;
- foco claramente visible y orden lógico;
- enlace para saltar al contenido;
- texto alternativo según la función de la imagen;
- objetivos táctiles cómodos y sin gestos obligatorios;
prefers-reduced-motionpara reducir movimiento.
Prompt para auditoría
Audita la web local según WCAG 2.2 nivel AA en lo que pueda comprobarse.
No cambies nada primero. Entrega defectos con URL, elemento, criterio,
impacto, pasos de reproducción y corrección mínima. Después corrige por
prioridad y repite una prueba completa solo con teclado a 390 px y 200 %
de zoom. Señala qué requiere revisión humana o lector de pantalla real.
Ejemplo
Un menú móvil se abre, pero el foco continúa detrás y Escape no cierra. La solución no consiste en ocultar visualmente el fondo: debe gestionar apertura, foco, cierre y retorno al botón.
Aceptación
No hay desplazamiento horizontal a 320 px; el contenido conserva orden; todos los controles se alcanzan y accionan; los errores de formulario se explican en texto y se asocian al campo.
Fuentes oficiales
Siguiente misión recomendada
Si has guardado la evidencia de esta lección, continúa con «Usa imágenes, iconos e identidad sin perder rendimiento». Si no, repite la comprobación antes de avanzar.