2526UdL3.3.4-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.4-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:
https://www.womanwithin.com/checkout
2.1.2. Código HTML:
<form action="/submit-payment" method="post">
<label for="card-number">Número de tarjeta:</label>
<input type="text" id="card-number" name="card-number">
<label for="zip">Código postal:</label>
<input type="text" id="zip" name="zip">
<button type="submit">Pagar ahora</button>
</form>
Explicación del problema detectado:
El código HTML proporcionado carece de cualquier mecanismo para revisar, corregir o confirmar los datos antes de la submission final. Por ejemplo, no hay un resumen de los datos ingresados, ni un diálogo de confirmación, ni opciones para editar campos críticos como el código postal o detalles de pago. Esto viola WCAG 3.3.4 porque permite que errores (como un ZIP+4 inválido) se procesen sin oportunidad de reversión, lo que puede resultar en transacciones fallidas o incorrectas con implicaciones financieras. En el enlace a WomanWithin, reportes indican que errores técnicos en entradas como códigos postales generan mensajes sin pasos claros para corrección antes de finalizar, exacerbando el problema.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidades cognitivas enfrentan barreras graves, ya que pueden cometer errores inadvertidos al ingresar datos y no tener la oportunidad de revisarlos, lo que lleva a consecuencias financieras como cargos incorrectos o pedidos fallidos. Usuarios con discapacidad visual total experimentan barreras moderadas, ya que dependen de lectores de pantalla para navegar formularios, y sin confirmaciones accesibles, no pueden verificar información crítica fácilmente, aumentando el riesgo de errores irreversibles y reduciendo la confianza en el proceso.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.amazon.com/gp/cart/view.html?ref_=nav_cart
2.2.2 Código HTML:
<button type="button" id="place-order">Realizar pedido</button>
Confirmar pedido
Resumen: Artículos seleccionados, dirección de envío, método de pago. ¿Seguro que quieres proceder?
<button>Cancelar</button>
<button>Confirmar</button>
Explicación de la solución aplicada:
La solución implementa un paso explícito de revisión y confirmación antes de finalizar la transacción, como se ve en el checkout de Amazon. El usuario puede verificar detalles como artículos, dirección y pago, editarlos si es necesario, y solo proceder tras una confirmación explícita. El código HTML usa elementos accesibles como role="dialog" y aria-labelledby para que lectores de pantalla anuncien el contenido correctamente, permitiendo reversión o corrección. Esto previene errores con consecuencias legales o financieras, cumpliendo WCAG 3.3.4 al ofrecer opciones para revisar, confirmar o revertir acciones críticas.
