Técnica Técnicas generales WCAG 2.2

G155Añadir una casilla de confirmación junto al botón de enviar

Nombre oficial en el W3C: Proporcionar una casilla de verificación además de un botón de envío

En pocas palabras

Algunas operaciones no se pueden deshacer, como una transferencia, una compra o borrar una cuenta. Antes de hacerlas, el formulario muestra una casilla sin marcar del tipo «He revisado los datos y son correctos». Si no se marca, la operación no se hace y se avisa a la persona.

Por qué es importante

Cualquiera puede pulsar «Enviar» sin querer o con un dato mal escrito. Para algunas personas es más probable: quien tiene temblor en las manos, dificultades de lectura o problemas de memoria.

Si la operación no tiene vuelta atrás, el error sale caro. La casilla obliga a hacer dos acciones distintas y anima a revisar antes de confirmar.

Cómo se hace

Ponga la casilla cerca del botón de enviar, para que se vea al terminar el formulario.
Déjela siempre sin marcar al cargar la página.
Use un texto concreto, como «Confirmo que quiero eliminar esta cuenta» o «He comprobado el importe de la transferencia».
Si se envía sin marcarla, no haga la operación. Muestre un mensaje claro que explique qué falta.
Conserve todos los datos que la persona ya había escrito, para que no tenga que repetirlos.

Cómo comprobarlo

Busque formularios con operaciones que no se pueden deshacer: pagos, pedidos, borrados, envíos oficiales.
Compruebe que tienen una casilla de confirmación sin marcar junto al botón.
Envíe el formulario sin marcarla y verifique que la operación no se hace y aparece un aviso.
Compruebe que los datos escritos siguen en el formulario.
Marque la casilla, envíe de nuevo y verifique que ahora sí se completa.

Ejemplo

Casilla de confirmación antes de borrar una cuenta bancaria guardada.

<form action="/cuentas/eliminar" method="post">
  <p>Va a eliminar la cuenta ES12 **** 3456.</p>
  <input type="checkbox" id="confirmar" name="confirmar" required>
  <label for="confirmar">Confirmo que quiero eliminar esta cuenta</label>
  <button type="submit">Eliminar cuenta</button>
</form>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G155 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Cualquier tecnología

Descripción

El objetivo de esta técnica es proporcionar una casilla de verificación que los usuarios deben marcar para indicar que han revisado los datos introducidos y que están listos para que se confirmen. Esto es importante cuando la naturaleza de la transacción es tal que podría no ser reversible si después se descubren errores en los datos introducidos, o cuando el resultado de una acción es la eliminación de datos. El autor proporciona una casilla de verificación que no está marcada cuando se carga la página, con una etiqueta del tipo «Confirmo que los datos introducidos son correctos y deseo enviarlos» o «Confirmo que deseo eliminar estos datos». La casilla de verificación debe situarse cerca del botón de envío para ayudar al usuario a percibirla durante el proceso de envío. Si la casilla de verificación no está marcada cuando se envía el formulario, los datos se rechazan y se pide al usuario que revise lo introducido, marque la casilla y vuelva a enviar. Solo si la casilla de verificación está marcada se aceptan los datos y se procesa la transacción.

Esta casilla de verificación ayuda a protegerse de las consecuencias de un envío accidental del formulario y sirve también para invitar al usuario a asegurarse de que ha introducido datos exactos. Es más seguro que limitarse a poner en el botón de envío una etiqueta como «los datos son correctos, enviar». Ofrecer la casilla de verificación como un control independiente del botón de envío obliga al usuario a «comprobar dos veces», ya que debe tanto marcar la casilla como activar el botón de envío para que la transacción siga adelante. Por tanto, se trata de un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío.

Cuando los usuarios envían la información sin marcar la casilla de verificación, no deben perder la información que han introducido al volver al formulario para enviarlo de nuevo.

Ejemplos

Un servicio de banca en línea permite a los usuarios transferir dinero entre cuentas en distintas divisas. Como los tipos de cambio fluctúan constantemente, el dinero no puede volver a cambiarse al mismo tipo si el usuario descubre un error en los datos introducidos después de realizarse la transacción. Además de los campos «cuenta de origen», «cuenta de destino» e «importe», hay una casilla de verificación con la etiqueta «He comprobado que el importe que deseo transferir es correcto». Si esta casilla no está marcada cuando el usuario envía el formulario, la transacción no se realiza y se avisa al usuario. Si la casilla está marcada, se realiza la transacción (irreversible).
Un sistema de pagos en línea almacena la información de las cuentas bancarias de los usuarios para procesar los pagos. Existe un procedimiento elaborado para que los usuarios introduzcan nuevas cuentas y verifiquen que son sus titulares. Hay una opción para eliminar cuentas antiguas, pero si una cuenta se elimina accidentalmente sería difícil restablecerla y se perdería el historial de transacciones de esa cuenta. Por ello, en las páginas que permiten a los usuarios eliminar cuentas hay una casilla de verificación con la etiqueta «Confirmo que deseo eliminar esta cuenta». Si esta casilla no está marcada cuando el usuario envía el formulario, la cuenta no se elimina y se muestra al usuario un mensaje de error. Solo si la casilla está marcada se elimina la cuenta.
El proceso de compra de un sitio de comercio electrónico incluye un formulario que recoge la información del pedido, del envío y de la facturación. Tras enviar el formulario, el usuario pasa a una página en la que se resume la información enviada para que la revise. Debajo del resumen se muestra una casilla de verificación con la etiqueta «He revisado estos datos y confirmo que son correctos». El usuario debe marcar la casilla y activar un botón «finalizar pedido» para completar la transacción.

Pruebas

Procedimiento

Para las páginas de entrada de datos del usuario que dan lugar a transacciones irreversibles:

Comprobar que, además del botón de envío, se proporciona una casilla de verificación que indica la confirmación por parte del usuario de los datos introducidos o de la acción.
Comprobar que, si la casilla de verificación no está marcada cuando se envía el formulario, los datos se rechazan y se pide al usuario que revise lo introducido, marque la casilla y vuelva a enviar.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G155 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.