2526UdL3.3.7-A-002
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_3/3.3_Assistencia_en_los_input/3.3.7-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="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>
Explicación del problema detectado:
En este formulario, si el usuario deja el campo vacío o ingresa algo no válido, no recibe ninguna sugerencia específica.
No indica qué está mal, no ofrece ninguna corrección sugerida y solo aparece borde rojo.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
La falta de sugerencias afecta a personas con dificultades cognitivas, personas con baja comprensión lectora y personas que usan lector de pantalla.
Estas personas no sabrán cómo corregir el error porque no reciben ninguna ayuda específica.
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 id="formulario-contacto">
<label for="email">Correo electrónico:</label>
<input
type="email"
id="email"
name="email"
required
aria-describedby="error-email"
>
<button type="submit">Enviar</button>
</form>
<script>
document.getElementById("formulario-contacto")
.addEventListener("submit", function (e) {
const emailInput = document.getElementById("email");
const errorSpan = document.getElementById("error-email");
errorSpan.textContent = ""; // Limpiar mensaje
if (!emailInput.value) {
e.preventDefault();
errorSpan.textContent = "Introduce tu correo electrónico.";
} else if (!emailInput.checkValidity()) {
e.preventDefault();
errorSpan.textContent = "Introduce un correo válido como: usuario@ejemplo.com";
}
});
</script>
Explicación de la solución aplicada:
Ahora, cuando se produce un error en la introducción de datos, el sistema proporciona una sugerencia clara y específica que ayuda al usuario a corregirlo.
Si el campo de correo electrónico se deja vacío, el formulario muestra un mensaje indicando que debe introducir su dirección de correo. Si el formato no es válido, se ofrece una indicación concreta.
De esta forma, el usuario no solo es informado de que existe un error, sino que también recibe orientación sobre cómo solucionarlo.
