2526UPSA4.1.1-A-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_4/4.1_Compatible/4.1.1-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<form>
<label for="campo-email">Suscríbete al boletín:</label>
<input type="email" id="campo-email" name="newsletter">
</form>
<form>
<label for="campo-email">Inicia sesión:</label>
<input type="text" id="campo-email" name="login">
</form>
Explicación del problema detectado:
El código HTML contiene errores de sintaxis graves, específicamente la duplicación del valor del atributo id. Según las especificaciones HTML, cada ID debe ser único dentro de un mismo documento.
Al repetir id="campo-email", el navegador y las tecnologías de asistencia no pueden determinar inequívocamente a qué elemento se refiere el código, rompiendo la estructura lógica de la página .
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: Usuarios de lectores de pantalla y tecnologías de asistencia que dependen de la estructura del código para navegar.
Barreras:
Etiquetado incorrecto: Los lectores de pantalla utilizan el ID para asociar etiquetas (label) con sus campos (input). Si el ID está duplicado, el lector puede anunciar la etiqueta incorrecta (por ejemplo, decir "Suscríbete" cuando el usuario está en el campo de "Iniciar sesión").
Fallos de navegación: Los scripts o enlaces internos que apuntan a ese ID solo funcionarán con el primero que encuentren, haciendo el segundo inaccesible .
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<form>
<label for="newsletter-email">Suscríbete al boletín:</label>
<input type="email" id="newsletter-email" name="newsletter">
</form>
<form>
<label for="login-email">Inicia sesión:</label>
<input type="text" id="login-email" name="login">
</form>
Explicación de la solución aplicada:
Se ha corregido el código asegurando que todos los atributos id tengan valores únicos dentro de la página (newsletter-email y login-email).
Esto garantiza que el código HTML sea válido (cumpla con el estándar de "buen formado") y permite que los navegadores y productos de apoyo analicen ("parseen") la estructura sin ambigüedades, asociando correctamente cada etiqueta con su control correspondiente .
