ARIA (Accessible Rich Internet Applications) è un insieme di attributi che aggiungono semantica di accessibilità — ruoli, stati e proprietà — che l'HTML nativo non può esprimere. Ma la regola più importante di ARIA è: preferisci sempre l'HTML nativo.
Save
Save
Gli elementi nativi includono ruoli corretti, comportamento da tastiera e focus gratuitamente. Ricorri ad ARIA solo quando nessun elemento nativo fa il lavoro.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Questo è veramente ARIA utile: informare gli screen reader sui contenuti che cambiano senza ricaricare la pagina (risultati di ricerca, toast, errori di validazione).
ARIA scorretto è peggio che niente — fornisce informazioni false agli utenti di screen reader. E ARIA cambia solo la semantica, mai il comportamento: role="button" su un <div> non lo rende focusabile o cliccabile; devi aggiungere tabindex e gestori di eventi da tastiera tu stesso.
Usa HTML semantico per il 95% dei casi; usa ARIA per colmare i vuoti per widget personalizzati (tab, combobox, menu) e per annunciare aggiornamenti dinamici tramite live region.
Segui le regole — preferisci nativo, non modificare la semantica nativa inutilmente, mantenere gli stati sincronizzati e non applicare mai un ruolo che non implementi completamente.