Errores accesibles en formularios de cita

Un mensaje de error debe explicar qué puede hacer la persona a continuación. «Entrada no válida» apenas ayuda con el formato de fecha y describe mal un horario ya ocupado. Una reserva cuyo estado se desconoce necesita otra respuesta.

Tres situaciones con mensajes adecuados

El servicio de citas siguiente es ficticio. Utiliza un campo de texto para la fecha y ofrece una lista de reservas existentes. La fecha del ejemplo es el 14 de diciembre de 2026.

El tercer mensaje no afirma que la reserva haya fallado: todavía no se sabe. En el ejemplo, «Abrir lista de citas» lleva a las reservas existentes. Si el producto real no tiene esa lista, necesita otra vía fiable para aclarar el estado.

Relacionar el mensaje con el campo

Muestre el formato y el ejemplo antes de que aparezca un error. Admita en lo posible los métodos de entrada que necesite su público; evite formatos innecesariamente restrictivos. Este ejemplo reducido muestra el campo tras un error de formato:

<label for="appointment-date">Fecha</label>
<p id="appointment-date-hint">DD/MM/AAAA, por ejemplo 14/12/2026</p>
<input id="appointment-date" name="appointmentDate" type="text"
  value="14/12" aria-invalid="true"
  aria-describedby="appointment-date-hint appointment-date-error">
<p id="appointment-date-error">Introduzca la fecha como DD/MM/AAAA.</p>

Los identificadores relacionan etiqueta, ayuda y error con el mismo campo. El color puede apoyar, pero el mensaje debe entenderse sin un borde rojo. El tutorial de W3C WAI explica esta asociación mediante aria-describedby y las indicaciones comprensibles para corregir errores.

Tras una corrección válida, retire el texto de error, su referencia y el estado no válido; la ayuda sobre el formato puede quedarse. Este marcado por sí solo no demuestra la accesibilidad de todo el formulario.

Probar el camino hacia la corrección

Si aparecen varios errores al enviar, ayuda un resumen con enlaces a los campos afectados. Decida si el foco pasa al resumen o al primer campo incorrecto y pruebe con teclado y los lectores de pantalla previstos. Las actualizaciones dinámicas deben percibirse sin interrumpir innecesariamente cada pulsación.

En el ejemplo, la persona debe corregir la fecha sin volver a introducir los demás datos válidos. Compruebe después que el error anterior ya no se anuncia. Si el horario está ocupado, conserve los otros datos mientras se elige una hora distinta. Con estado incierto, el siguiente paso aclara primero la reserva existente.

Pruebe también un mensaje explícito de éxito con la cita confirmada. Así puede saberse que la tarea está terminada.

Fuentes

• W3C WAI: User Notification