aria-atomic

Quando usarlo

Su una live region i cui aggiornamenti hanno senso solo se letti come un’unità completa. L’esempio classico è uno stato su riga singola come «3 risultati trovati»: se la live region è aria-atomic="false" (valore predefinito) e cambia solo il numero, lo screen reader potrebbe annunciare soltanto «3», privo di contesto. Con aria-atomic="true", viene annunciata l’intera frase.

Si imposti aria-atomic="false" (o si ometta) quando:

• La regione è un registro o un pannello di chat in cui ogni nuova riga è autonoma — «Alice: ciao», «Bob: salve». Rileggere l’intero registro ad ogni aggiornamento sarebbe insopportabile.
• Solo il nuovo contenuto porta la nuova informazione.

Si imposti aria-atomic="true" quando:

• La regione è una frase breve e stabile il cui significato dipende dalle parole vicine — «Totale carrello: 42,18 €», «Pagina 3 di 12», «Filtri applicati: 2».
• Una piccola modifica nel DOM all’interno della regione ha scarso significato da sola.

aria-atomic è indipendente da aria-live e aria-busy. Funzionano insieme ma regolano aspetti diversi.

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". Il valore predefinito è "false".

L’attributo va impostato una sola volta sulla live region e lasciato invariato — è una proprietà del modo in cui la regione deve essere annunciata, non uno stato che cambia nel tempo. Viene inoltre ereditato: applicare aria-atomic="true" a un elemento padre rende atomiche le live region discendenti, salvo override esplicito.

Se la strategia di aggiornamento è «sostituire l’intero testo della regione», aria-atomic="true" produce l’annuncio più naturale. Se la strategia è «aggiungere una nuova riga», di solito si preferisce aria-atomic="false" affinché venga letta solo la riga aggiunta.

Errori comuni

• Lasciare aria-atomic al suo valore predefinito su uno stato stabile a riga singola, e sentire annunciare solo «5» invece di «5 risultati trovati».
• Impostare aria-atomic="true" su un registro di chat — ogni nuovo messaggio causa la rilettura dell’intero registro.
• Aggiornare solo un <span> all’interno di una regione atomica e restare sorpresi che venga annunciato anche il testo circostante. È esattamente il significato di «atomico».
• Usare aria-atomic su una regione priva di aria-live e di un ruolo live implicito — l’attributo non ha effetto.
• Impostare aria-atomic su un controllo con focus. Gli attributi delle live region appartengono ai contenitori di stato, non agli elementi interattivi.

Esempio

<!-- Atomico: l'intera frase è il messaggio -->
<p aria-live="polite" aria-atomic="true">
  Totale carrello: <span id="cart-total">0,00 €</span>
</p>

<!-- Non atomico: viene annunciata solo la nuova riga -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: ciao</li>
</ul>