2526UPSA2.4.6-B-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_2/2.4_Navegable/2.4.6-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://news.ycombinator.com/
2.1.2. Código HTML:
<form>
Search:
<input type="text" name="q">
</form>
Explicación del problema detectado:
El problema de este código es que la palabra "Search:" es texto plano y está suelta.
Aunque visualmente la palabra está pegada a la caja, no se ha usado la etiqueta label ni ningún atributo para unirlos. Para el navegador, son dos cosas independientes: por un lado hay un texto y por otro una caja vacía, sin nada que le indique al sistema que van juntos.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esto afecta a las personas ciegas que usan lectores de pantalla.
Cuando navegan con el teclado y entran en la caja, el asistente de voz solo les dice "Cuadro de edición" o "Campo de texto". Como no hay nada en el código que avise de que esa caja corresponde a la palabra "Search", el usuario no sabe para qué sirve y se queda sin saber qué tiene que escribir.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://pypi.org/account/login/
2.2.2 Código HTML:
<div class="form-group">
<label for="username" class="form-group__label"> Nombre de usuario </label> <input type="text" id="username" name="username" class="form-group__field" placeholder="Su nombre de usuario" value="">
</div>
Explicación de la solución aplicada:
Este código es un ejemplo accesible porque conecta el texto con la caja para escribir.
La clave está en que el atributo for="username" de la etiqueta coincide exactamente con el id="username" del input. Gracias a esta unión en el código, cuando una persona que usa un lector de pantalla llega a la caja, el sistema le lee en voz alta "Nombre de usuario".
Sin esa conexión, el lector solo diría "Cuadro de edición" y el usuario no sabría qué datos tiene que rellenar ahí.
