Errori accessibili nei moduli di prenotazione

Un messaggio di errore deve spiegare che cosa può fare la persona. «Dato non valido» aiuta poco con il formato della data e descrive male un orario già occupato. Una prenotazione dallo stato sconosciuto richiede un'altra risposta.

Tre situazioni con testi adatti

Il servizio di appuntamenti seguente è immaginario. Usa un campo di testo per la data e offre un elenco delle prenotazioni esistenti. La data d'esempio è il 14 dicembre 2026.

Il terzo messaggio non dichiara che la prenotazione sia fallita: non è ancora noto. Nell'esempio, «Apri elenco appuntamenti» porta alle prenotazioni esistenti. Se il prodotto reale non ha tale elenco, serve un altro modo affidabile per accertare lo stato.

Collegare il messaggio al campo

Mostri formato ed esempio prima di un errore. Accetti per quanto possibile le modalità di inserimento necessarie al pubblico, senza formati inutilmente rigidi. Questo esempio ridotto mostra il campo dopo un errore di formato:

<label for="appointment-date">Data</label>
<p id="appointment-date-hint">GG/MM/AAAA, ad esempio 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">Inserisca la data come GG/MM/AAAA.</p>

Gli identificativi collegano etichetta, suggerimento ed errore allo stesso campo. Il colore può aiutare, ma il messaggio deve essere comprensibile anche senza bordo rosso. Il tutorial W3C WAI spiega questa associazione tramite aria-describedby e le istruzioni comprensibili per correggere gli errori.

Dopo una correzione valida, rimuova testo d'errore, relativo riferimento e stato non valido; il suggerimento sul formato può restare. Questo codice non dimostra da solo che l'intero modulo sia accessibile.

Provare il percorso di correzione

Se l'invio produce più errori, è utile un riepilogo con collegamenti ai campi interessati. Stabilisca se spostare il focus al riepilogo o al primo campo errato, poi provi con tastiera e lettori di schermo previsti. I messaggi aggiornati dinamicamente devono essere percepibili senza interrompere inutilmente ogni battuta.

Nell'esempio, la persona deve correggere la data senza reinserire gli altri dati validi. Verifichi poi che il vecchio errore non venga più annunciato. Se l'orario è occupato, mantenga gli altri dati mentre si sceglie un'alternativa. Se lo stato è incerto, il passo successivo chiarisce prima la prenotazione esistente.

Provi anche un messaggio esplicito di successo con l'appuntamento confermato. È ciò che permette di riconoscere il completamento dell'attività.

Fonti

• W3C WAI: User Notification