2526UPSA1.3.5-A-000
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_1/1.3_Adaptable/1.3.5-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://sede.sepe.gob.es/contacte/contacteFormulario.do
2.1.2. Código HTML:
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre_usuario">
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos_usuario">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="contacto_email">
<button type="submit">Enviar</button>
</form>
Explicación del problema detectado:
El principal fallo de este código HTML es la ausencia del atributo autocomplete, lo que impide que el navegador y las tecnologías de asistencia identifiquen el propósito específico de cada campo (como el nombre, el apellido o el correo).
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
El incumplimiento de este criterio afecta principalmente a personas con discapacidades cognitivas, quienes enfrentan una elevada carga mental y riesgo de error al no contar con la ayuda del autocompletado.
También afecta a usuarios con discapacidades motoras, para quienes teclear manualmente cada dato supone una barrera de fatiga física innecesaria.
En conjunto, la falta de este atributo genera una barrera de exclusión funcional, impidiendo que estos colectivos completen trámites digitales con la misma autonomía, rapidez y seguridad que el resto de los usuarios.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.zara.com/es/es/signup
2.2.2 Código HTML:
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre_usuario" autocomplete="given-name">
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos_usuario" autocomplete="family-name">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="contacto_email" autocomplete="email">
<button type="submit">Enviar</button>
</form>
Explicación de la solución aplicada:
En el ejemplo que vemos en la imagen aparece un formulario, que gracias a la herramienta Web Developer Toolbar podemos ver los atributos de los inputs del formulario. En la imagen podemos ver como en los inputs aparece el atributo autocomplete que sirve para que el navegador y las tecnologías de asistencia identifiquen el propósito específico de cada campo (como el nombre, el apellido o el correo).
Además, el contenido de los atributos autocomplete tienen que seguir los criterios establecidos en: https://www.w3.org/TR/WCAG21/#input-purposes. En el formulario de la imagen, también se siguen estos criterios establecidos.
