status

Quando usarlo

Per messaggi informativi non urgenti: «Salvato», «12 risultati», «Articolo aggiunto al carrello», «Connessione in corso…». role="status" equivale a aria-live="polite" più un aria-atomic="true" implicito — lo screen reader attende il termine dell’enunciato corrente, poi legge la modifica.

La maggior parte dei messaggi di successo nell’invio di moduli, i conteggi dei risultati di ricerca, i completamenti del caricamento e le notifiche toast rientrano in questa categoria. È necessario riservare role="alert" alle interruzioni genuine.

L’elemento nativo <output> porta automaticamente role="status" — utile per risultati in stile calcolatrice abbinati agli input di <form>. Per le notifiche toast e di stato al di fuori del contesto di un modulo, <div role="status"> è il pattern standard.

Come tutte le live region, l’elemento status DEVE essere nel DOM prima che il messaggio venga inserito. È necessario renderizzare <div role="status"></div> vuoto, quindi aggiornare il contenuto testuale. Aggiungere l’elemento dal nulla con il contenuto già inserito non è affidabile.

Trade-off delle live region

• aria-live="off" — nessun annuncio. Valore predefinito per i contenuti ordinari.
• aria-live="polite" (≡ role="status") — annunciato alla prossima pausa. Valore predefinito per i messaggi di stato.
• aria-live="assertive" (≡ role="alert") — interrompe il parlato corrente. Da usare solo per messaggi urgenti.

WCAG 4.1.3 (Messaggi di stato, Livello AA) richiede che i messaggi di stato siano esposti tramite una live region affinché la tecnologia assistiva possa annunciarli senza forzare un cambio di focus.

Errori comuni

• Elemento status creato dinamicamente con testo già inserito. Molti screen reader non rilevano l’annuncio.
• Aggiornare lo status con contenuto marcato (<span> e <strong>). Alcuni screen reader leggono il markup alla lettera; è opportuno mantenere il contenuto dello status in testo semplice.
• Aggiornamenti multipli inviati rapidamente — i messaggi successivi sovrascrivono quelli precedenti senza alcun annuncio.
• Utilizzare role="status" per errori genuinamente urgenti (in tal caso si deve usare role="alert").
• Status visivamente nascosto senza considerazione di aria-atomic quando il testo contiene parti stabili e parti variabili. Il valore predefinito aria-atomic="true" su status legge l’intera regione ogni volta, il che può risultare ridondante.

Esempio

<!-- Renderizzare vuoto al caricamento della pagina -->
<div role="status" id="cartStatus"></div>

<script>
  // Quando il carrello viene aggiornato:
  document.getElementById('cartStatus').textContent =
    'Aggiunto al carrello. 3 articoli, totale 42,00 €.';
</script>

<!-- Equivalente nativo -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>