Un proyecto interactivo creado por Francisco Sandoval (FS), Desarrollador Front-End comprometido con la Accesibilidad Web (A11y). Aquí podrás revisar ejemplos de código, simular cómo lee el lector de pantalla NVDA y aprender a construir interfaces accesibles y sin barreras.
"Muchas veces aplicamos código HTML sin comprender cómo lo percibe una persona que utiliza tecnologías de asistencia. En este laboratorio exploraremos paso a paso las pautas WCAG 2.2, organizadas progresivamente por nivel. ¡Acompaña a WAC y a mí a poner a prueba el código con la simulación de NVDA!"
A continuación verás una vista previa destacada de cada fase. Haz clic en el botón de cada tarjeta para acceder a la guía completa de ejemplos de código HTML y simulaciones de audio para lectores de pantalla.
Requisitos indispensables para evitar barreras críticas insuperables.
Ejemplo de imagen mal y bien etiquetada para lectores de pantalla NVDA.
Describe la imagen en su contexto. Cumple WCAG 1.1.1 Nivel A.
<img src="perro.jpg" alt="Un perro Golden Retriever corriendo en un parque">
🔊 Transcripción NVDA:
"Un perro Golden Retriever corriendo en un parque, imagen"
Requisitos necesarios para garantizar la legibilidad y usabilidad general en la web.
La presentación visual del texto debe tener una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande.
Se utiliza un tono oscuro (#4A4A4A) sobre fondo blanco, superando con holgura el mínimo exigido de 4.5:1.
Este texto cumple con las pautas de contraste WCAG 2.2.
<p style="color: #4A4A4A; background-color: #FFFFFF;">
Este texto cumple con las pautas...
</p>
Ejemplos seleccionados para llevar la accesibilidad al máximo nivel posible.
La presentación visual del texto debe tener una relación de contraste mejorada de al menos 7:1 en texto normal.
Uso de texto negro puro (#000000) sobre fondo blanco (#FFFFFF).
Este texto alcanza la máxima accesibilidad visual posible (Nivel AAA).
<p style="color: #000000; background-color: #FFFFFF;">
Este texto alcanza la máxima accesibilidad...
</p>