aria-invalid

Quando utilizzarlo

Su un input, textarea, combobox, listbox o altro widget di modulo il cui valore corrente non ha superato la validazione. Si imposta aria-invalid="true" dopo che l’utente ha avuto la possibilità di inserire un valore — di solito all’uscita dal campo (blur) o all’invio del modulo. Impostarlo al primo rendering, prima che l’utente abbia digitato qualcosa, è fastidioso e annuncia i campi obbligatori vuoti come non validi prima ancora che l’utente abbia fatto qualcosa.

È necessario abbinarlo al messaggio di errore effettivo. Lo schema è il seguente:

1. Rendere visibile un messaggio di errore con il proprio id.
2. Impostare aria-invalid="true" sull’input.
3. Puntare aria-describedby all’id del messaggio di errore.

Gli screen reader annunciano quindi sia lo stato non valido sia la spiegazione: «Email, campo di testo, valore non valido, inserire un indirizzo email valido».

Come mantenerlo sincronizzato

I valori ammessi sono "true", "false", "grammar" e "spelling". In pratica i più comuni sono "true" e "false". "grammar" e "spelling" vengono usati dagli editor di testo avanzati per contrassegnare un determinato span; la maggior parte dei flussi di lavoro sui moduli non ne ha bisogno.

Si imposta "false" come valore predefinito (o si omette l’attributo). Quando la validazione fallisce, si imposta "true" e si mostra il messaggio di errore. Quando l’utente corregge il campo, si ripristina entrambi — si riporta aria-invalid a "false" e si rimuove o si nasconde il messaggio di errore — nello stesso momento.

L’attributo HTML required e la pseudo-classe CSS :invalid operano in modo indipendente. aria-invalid è il segnale che gli screen reader leggono; gli altri servono ai browser e allo stile visivo. È necessario mantenerli sincronizzati.

Errori comuni

• Impostare aria-invalid="true" prima che l’utente abbia avuto la possibilità di interagire con il campo.
• Contrassegnare un campo come non valido senza aria-describedby e senza un messaggio di errore visibile — lo screen reader annuncia «non valido» senza alcuna spiegazione.
• Lasciare aria-invalid="true" dopo che l’utente ha corretto il valore.
• Puntare aria-describedby a un contenitore vuoto, in modo che l’annuncio dell’errore risulti silenzioso.
• Usare aria-invalid su <fieldset> o altri contenitori non-input — non ha significato in quel contesto.
• Affidarsi al solo colore per indicare lo stato di errore — aria-invalid aiuta gli screen reader; è comunque necessaria un’etichetta visibile o un’icona per gli utenti vedenti (WCAG 1.4.1).

Esempio

<label for="email">Indirizzo email</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Inserire un indirizzo email valido.</p>