Form accessibili

Definizione — I form accessibili sono moduli in cui ogni campo è correttamente etichettato, l’utente riceve istruzioni e suggerimenti chiari, può operare da tastiera, ottiene messaggi di errore utili e può correggerli facilmente. I criteri WCAG più rilevanti sono: 1.3.1 Informazioni e relazioni, 1.3.5 Scopo dei campi (AA), 2.1.1 Tastiera, 2.4.3 Ordine di focus, 2.5.3 Label in Name (A), 3.3.1–3.3.4 (errori, etichette, suggerimenti, prevenzione), 4.1.2 Nome/Ruolo/Valore.

Pattern fondamentali

• Etichette esplicite con <label for>; il placeholder non è un’etichetta.
• Istruzioni vicino al campo e associate con aria-describedby.
• Obbligatorietà: usa required (e non solo l’asterisco visivo); indica chiaramente i campi richiesti.
• Autocompilazione con autocomplete e inputmode appropriati; per 1.3.5 usa token semantici (es. given-name, email).
• Errori annunciabili: aria-invalid=\"true\" sul controllo + messaggio collegato; error summary dopo submit.
• Tastiera e focus: ordine logico, focus visibile, nessuna trappola.

Esempi

Campo con aiuto e validazione

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
       aria-describedby="email-hint email-err" required>
<p id="email-hint" class="hint">Usa il tuo indirizzo aziendale.</p>
<p id="email-err" class="error" hidden role="alert">Formato email non valido.</p>

Gruppo radio con fieldset/legend

<fieldset>
  <legend>Metodo di contatto preferito</legend>
  <label><input type="radio" name="contatto" value="email"> Email</label>
  <label><input type="radio" name="contatto" value="telefono"> Telefono</label>
</fieldset>

Error summary dopo submit

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

Buone pratiche di UI/UX

• Ordine di focus coerente con la lettura; evita riordini CSS che rompono la sequenza.
• Contrasto sufficiente per testo, bordi dei campi e indicatori di errore (1.4.3, 1.4.11).
• Spazi e target touch adeguati; evita tooltip che compaiono solo al passaggio del mouse.
• Salvataggio progressivo e messaggi di stato (es. “Bozza salvata”) annunciati con role="status" o aria-live="polite".
• Prevenzione errori nei task critici: schermata di revisione, conferma esplicita, possibilità di annullare (3.3.4).

Errori comuni

• Affidarsi ai placeholder come unica etichetta; messaggi di errore generici e non collegati al campo.
• Controlli non raggiungibili da tastiera o con focus poco visibile.
• Assenza di autocomplete e di token semantici (1.3.5), che aiutano sia accessibilità sia usabilità.