Errori e suggerimenti

Definizione — Con errori e suggerimenti si intendono i meccanismi che aiutano l’utente a prevenire, riconoscere e correggere gli errori, in particolare nei moduli. In WCAG 2.1 i riferimenti sono: 3.3.1 Identificazione dell’errore (A), 3.3.2 Etichette o istruzioni (A), 3.3.3 Suggerimenti per l’errore (AA), 3.3.4 Prevenzione degli errori (AA) per contenuti legali/finanziari o che memorizzano dati utente.

Requisiti chiave

• Identificazione chiara: indica quale campo è in errore e perché (non “Errore”, ma “Il codice fiscale deve avere 16 caratteri”).
• Associazione: collega il messaggio al campo (aria-describedby o testo adiacente) e marca il controllo con aria-invalid="true".
• Suggerimento: fornisci la soluzione (“Usa solo lettere maiuscole e numeri”).
• Annuncio: usa un’area con role="alert" o aria-live="assertive" per notificare gli errori dopo l’invio.
• Prevenzione: nei task critici, revisione/anteprima, conferma e possibilità di annullare.

Esempio (campo con errore)

<label for="cf">Codice fiscale</label>
<input id="cf" name="cf" aria-invalid="true" aria-describedby="cf-err" required>
<p id="cf-err" class="error" role="alert">Il codice fiscale deve avere 16 caratteri.</p>

Error summary (utile per screen reader)

<div id="form-errors" role="alert" aria-live="assertive">
  <h2>Correggi i seguenti errori</h2>
  <ul>
    <li><a class="text-primary" href="#cf">Codice fiscale: 16 caratteri richiesti</a></li>
    <li><a class="text-primary" href="#email">Email: formato non valido</a></li>
  </ul>
</div>

Buone pratiche

• Prima dell’errore: istruzioni vicino al campo (es. formato data), esempi, autocomplete/inputmode appropriati.
• Timing: convalida on submit o on blur, evitando annunci continui a ogni singolo carattere.
• Contrasto & icone: non basare la segnalazione solo sul colore (1.4.1); usa testo+icona con contrasto adeguato.
• Focus management: dopo l’invio fallito porta il focus all’error summary (o al primo campo errato) e poi ritorno ordinato.

Prevenzione (3.3.4)

• Per operazioni legali/finanziarie/di invio dati: schermata di review prima della conferma, opzione Annulla o Modifica, conferma esplicita (“Confermo l’invio”).