❌ 1. Atributo alt omitido
El HTML no incluye alt. NVDA lee el nombre del archivo del servidor.
<img src="IMG_9402_perro.jpg">
🔊 Transcripción NVDA:
"I M G guion bajo 9 4 0 2 guion bajo perro punto j p g, imagen"
Desarrollo Front-End sin barreras de Accesibilidad Web (A11Y).
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.
¿Por qué probar con un lector de pantalla real?
"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!"
Explorar Criterios del Laboratorio
Fase 1: Criterios de Nivel A (Esenciales)
Requisitos indispensables para evitar barreras críticas insuperables.
Ejemplo de imagen mal y bien etiquetada para lectores de pantalla NVDA.
❌ 2. Alt con nombre de archivo
Se usó alt="perro.jpg". No aporta valor informativo.
<img src="perro.jpg" alt="perro.jpg">
🔊 Transcripción NVDA:
"perro punto j p g, imagen"
✅ 3. Alt descriptivo correcto
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"
Las relaciones visuales deben existir en el código HTML. Los campos de texto deben estar vinculados programáticamente a su etiqueta.
❌ 1. Etiqueta visual sin elemento <label>
Se usa un span visual. El lector de pantalla no reconoce la relación entre el texto y el campo.
Correo electrónico *
<span>Correo electrónico</span>
<input type="email">
🔊 Transcripción NVDA:
"Edición en blanco"
✅ 2. Etiqueta correcta con for e id
El label for=" " conecta directamente con el id del input, comunicando su propósito.
Escribe tu correo electrónico ejemplo: mimail@ejemplo.cl
<label for="email-demo-correcto">Correo electrónico <span class="obligatorio">(Obligatorio)</span></label>
<input type="email" id="email-demo-correcto" aria-describedby="ayudaMail" required>
<span id="ayudaMail" class="form-text">Escribe tu correo...</span>
🔊 Transcripción NVDA:
"Correo electrónico Obligatorio, edición, requerido, Escribe tu correo electrónico ejemplo: mimail@ejemplo.cl, en blanco"
Fase 2: Criterios de Nivel AA (Avanzados / Estándar Global)
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.
❌ 1. Contraste insuficiente (2.3:1)
Se usa un gris claro (#A0A0A0) sobre fondo blanco. Dificulta la lectura para personas con baja visión o bajo la luz del sol.
Este texto no tiene suficiente contraste visual.
<p style="color: #A0A0A0; background-color: #FFFFFF;">
Este texto no tiene suficiente contraste...
</p>
✅ 2. Contraste óptimo (7.0:1)
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>
Fase 3: Criterios de Nivel AAA (Avanzado)
Ejemplos seleccionados para llevar la accesibilidad al máximo nivel posible.