Stati ARIA

Definizione — Gli stati ARIA sono attributi aria-* che descrivono lo stato attuale di un componente interattivo per le tecnologie assistive. Esempi: aria-expanded (aperto/chiuso), aria-pressed (pulsante a stato), aria-selected (elementi selezionabili), aria-busy (caricamento in corso), aria-disabled (disabilitato). Devono essere sincronizzati con gli eventi reali dell’interfaccia.

Esempi pratici

Accordion — il bottone aggiorna aria-expanded e collega il pannello con aria-controls:

<button aria-expanded="false" aria-controls="p1" id="t1">Dettagli</button>
<div id="p1" hidden aria-labelledby="t1">Contenuto…</div>
<script>
const btn = document.getElementById('t1'), p = document.getElementById('p1');
btn.addEventListener('click', () => {
  const open = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!open));
  p.hidden = open;
});
</script>

Pulsante a stato:

<button aria-pressed="false">Preferito</button>

Stato di caricamento:

<div role="status" aria-live="polite" aria-busy="true">Caricamento…</div>

Buone pratiche

• Prima l’HTML: usa componenti nativi quando possibile; ARIA non aggiunge tastierabilità né sostituisce il focus.
• Allineamento: aggiorna gli stati con ogni interazione (click, tastiera) e sul cambio programmato dell’UI.
• Nome/ruolo/stato: rispetta WCAG 4.1.2; usa aria-labelledby/aria-label per nomi comprensibili.
• Evita aria-hidden="true" su elementi focusabili o necessari alla comprensione.

Errori comuni

• Stati non aggiornati (es. aria-expanded="true" ma pannello chiuso).
• Usare ARIA per “simulare” un bottone quando basterebbe <button>.
• Contraddizioni tra disabled nativo e aria-disabled non coerenti.