2526UFV3.3.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_3/3.3_Assistencia_en_los_input/3.3.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:
<label for="email">Email (required)</label>
<input id="email" type="email" style="border: 3px solid #c00;">
<button>Submit</button>
Explicación del problema detectado:
The error is communicated only through a red border. There is no text telling the user what is wrong or which field needs correction, so users who cannot perceive the visual cue may not detect the error.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Screen reader users and users with color vision deficiency may not know an error occurred, which field is wrong, or why submission fails—leading to blocked task completion.
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:
<label for="email">Email <span aria-hidden="true">*</span></label>
<input id="email" type="email" aria-invalid="true" aria-describedby="emailError">
<div id="emailError" role="alert" style="color:#c00;">
Error: Email is required.
</div>
<button>Submit</button>
Explicación de la solución aplicada:
A clear text error message identifies the problem (“Email is required”) and is linked to the input using aria-describedby, ensuring the error is available in text for assistive technologies.
