2526UPSA3.3.7-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_3/3.3_Assistencia_en_los_input/3.3.7-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://store.steampowered.com/join/
2.1.2. Código HTML:
<div class="form_row row_flex">
<div class="form_area">
<label for="email">Dirección de correo electrónico</label>
<input type="text" maxlength="255" name="email" id="email" />
</div>
</div>
<div class="form_row row_flex">
<div class="form_area">
<label class="reenter_row" for="reenter_email">Confirma tu dirección</label>
<input type="text" maxlength="255" name="reenter_email" id="reenter_email" />
</div>
</div>
Explicación del problema detectado:
Este formulario de registro presenta un problema de entrada redundante.
En el primer campo (id="email"), el usuario introduce su correo. Inmediatamente después, en el segundo campo (id="reenter_email"), se le obliga a escribir exactamente la misma información manualmente. El sistema no ofrece ninguna opción para seleccionar el correo ya escrito ni lo autocompleta, forzando una repetición innecesaria del proceso de escritura.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esto genera una barrera importante para personas con discapacidad motriz o cognitiva.
Para alguien con movilidad reducida en las manos (por ejemplo, temblores o artritis), teclear una dirección de correo larga y compleja supone un esfuerzo físico considerable. Obligarle a hacerlo dos veces duplica la fatiga y el tiempo necesario. Además, para personas con dificultades de concentración o memoria, la repetición aumenta la ansiedad y la probabilidad de cometer errores tipográficos que bloqueen el registro.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://getbootstrap.com/docs/5.3/examples/checkout/
2.2.2 Código HTML:
<div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address"> Shipping address is the same as my billing address
</label> </div>
Explicación de la solución aplicada:
Este código cumple con el criterio 3.3.7 (Entrada redundante). Al ofrecer un checkbox (id="same-address") que permite al usuario indicar que su dirección de envío y facturación son iguales, el sistema evita obligar al usuario a escribir manualmente la misma dirección dos veces. Esto reduce el esfuerzo físico y cognitivo, facilitando el proceso para personas con discapacidades motrices o de aprendizaje.
