WAI-ARIA

Definizione — WAI-ARIA (Accessible Rich Internet Applications) è la specifica del W3C che aggiunge ruoli (es. dialog, navigation), stati (es. aria-expanded, aria-selected) e proprietà (es. aria-controls, aria-labelledby) per descrivere a tecnologie assistive componenti e cambiamenti dinamici che l’HTML nativo non rappresenta da solo. ARIA migliora l’interoperabilità con screen reader, braille e comandi vocali, ma va usata con parsimonia.

Principi chiave

• Prima regola: se esiste un elemento nativo (button, link, details/summary), usalo. ARIA non sostituisce l’HTML semantico.
• Tastiera e focus: ARIA non “aggiunge” automaticamente interazione. Devi gestire tab, Enter/Space, roving tabindex e focus visibile.
• Stato reale = stato annunciato: sincronizza sempre gli attributi aria-* con il vero stato del componente.
• Pattern ufficiali: segui le WAI-ARIA Authoring Practices (APG) per menù, accordioni, dialog, tab, combobox.

Relazione con WCAG/EN 301 549

ARIA è uno strumento per soddisfare vari criteri delle WCAG 2.1, in particolare 4.1.2 Nome, Ruolo, Valore e 1.3.1 Informazioni e relazioni. È richiamata dalla norma EN 301 549 nei requisiti web/software. Un uso scorretto di ARIA può introdurre nuove barriere.

Esempi pratici

Pulsante che espande una sezione

<button id="toggler"
  aria-expanded="false"
  aria-controls="panel">Mostra dettagli</button>

<div id="panel" hidden>
  <p>Contenuto espandibile…</p>
</div>

<script>
  const btn = document.getElementById('toggler');
  const panel = document.getElementById('panel');
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    panel.hidden = open;
  });
</script>

Annunciare aggiornamenti di stato (esito form, aggiunto al carrello):

<div role="status" aria-live="polite" id="status"></div>
<script>document.getElementById('status').textContent = 'Prodotto aggiunto.';</script>

Errori comuni

• Usare role="button" su un <div> invece di un vero <button> (manca gestione tastiera).
• Impostare ruoli non compatibili con il contenuto (es. tablist senza gestione dei tab).
• Dimenticare aria-label/aria-labelledby su icone-azione prive di testo visibile.
• Ricorrere a ARIA per “curare” HTML errato: prima HTML semantico, poi ARIA.

Checklist rapida

• Elemento nativo disponibile? Usalo.
• Il componente è operabile solo da tastiera? Il focus è visibile?
• Ruolo e relazioni (aria-controls, aria-labelledby) sono corretti?
• Gli stati aria-* si aggiornano insieme al DOM?
• Eventi live hanno un’area con role="status"/alert?