2526UPSA3.3.4-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.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:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<h1>Eliminar cuenta</h1>
<p>Esta acción elimina tu cuenta y borra tus datos guardados.</p>
<form action="/delete-account" method="post">
<button type="submit">Eliminar definitivamente</button>
</form>
Explicación del problema detectado:
La acción es crítica (borrado de datos) y se ejecuta con un solo clic, sin revisión ni confirmación previa. No se ofrece opción clara para evitar el error antes de enviar la solicitud.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afecta a usuarios que pueden cometer clics accidentales o errores (temblores, fatiga, problemas cognitivos o de atención). La barrera es que un fallo provoca consecuencias graves (pérdida de datos) sin posibilidad real de corregir antes.
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:
<h1>Eliminar cuenta</h1>
<p>Antes de eliminar, revisa la información y confirma la acción.</p>
<!-- Paso 1: revisión -->
<div style="border:1px solid #ccc; padding:12px; max-width:600px;">
<h2>Revisión</h2>
<p>Se va a eliminar la cuenta y los datos guardados.</p>
<p><strong>Esto no se puede deshacer.</strong></p>
<label style="display:block; margin:10px 0;">
<input type="checkbox" id="ok">
Confirmo que entiendo las consecuencias
</label>
<button type="button" onclick="
if(!document.getElementById('ok').checked){
alert('Marca la casilla de confirmación antes de continuar.');
return;
}
const c = confirm('¿Seguro que quieres eliminar la cuenta?');
if(c) alert('Cuenta eliminada (confirmada).');
">
Confirmar eliminación
</button>
<a href='/account' style="margin-left:10px;">Cancelar</a>
</div>
Explicación de la solución aplicada:
Se añade prevención de errores mediante confirmación (casilla + diálogo) y opción de cancelar antes de ejecutar una acción irreversible. El usuario puede revisar y evitar el envío accidental.
