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.
❌ 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"
❌ 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.
<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.
<label for="email-demo-correcto">Correo electrónico <span class="obligatorio">(Obligatorio)</span></label>
<input type="email" id="email-demo-correcto" aria-describedby="mailAyuda" required>
<span id="mailAyuda" 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"