ARIA e accessibilità: label, role, aria-*
Associ le label ai controlli, applichi i ruoli ARIA quando necessario e utilizzi aria-label e aria-describedby per supportare gli screen reader.
ARIA e accessibilità: label, role, aria-* è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché ARIA?
ARIA (Accessible Rich Internet Applications) è un insieme di attributi HTML che comunicano lo scopo, lo stato e le proprietà dei componenti dell'interfaccia alle tecnologie assistive, come gli screen reader, soprattutto per i widget personalizzati che non hanno un equivalente HTML nativo.
La prima regola di ARIA
Non utilizzi ARIA se un elemento o un attributo HTML nativo può svolgere il compito. <button> è sempre preferibile a <div role="button">. L'HTML nativo offre accessibilità già pronta.
Ruoli landmark
I ruoli landmark ARIA consentono agli utenti di screen reader di spostarsi rapidamente tra le sezioni della pagina. La maggior parte è implicita nell'HTML semantico: <main> → role=main, <nav> → role=navigation. Aggiunga ruoli espliciti solo quando non viene utilizzato un elemento semantico.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label fornisce a un elemento un nome accessibile non visibile. Lo utilizzi quando non esiste un'etichetta di testo visibile a cui fare riferimento. È comune nei pulsanti con icone.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby utilizza il testo di un altro elemento come label, tramite un riferimento a un ID. È preferibile ad aria-label quando esiste già una label visibile.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby fa riferimento a un testo descrittivo aggiuntivo, come un messaggio di errore o un suggerimento, che integra la label. Gli screen reader leggono prima la label e poi la descrizione.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded e aria-haspopup
I widget dinamici richiedono attributi di stato. aria-expanded indica se un widget di apertura, come un accordion o un menu a discesa, è aperto o chiuso. Lo aggiorni in JavaScript quando cambia lo stato.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" rimuove un elemento e tutti i suoi figli dall'albero dell'accessibilità. Lo utilizzi per elementi decorativi, come le icone SVG, che sono già descritti da un testo visibile.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Regioni live: aria-live
aria-live indica agli screen reader di annunciare le modifiche a questa regione. polite attende che l'utente termini l'azione in corso. assertive interrompe immediatamente (lo utilizzi con moderazione).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" equivale implicitamente a aria-live=assertive. Inserisca i messaggi di errore o le notifiche importanti in un elemento con questo ruolo: gli screen reader li annunceranno immediatamente.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyErrori accessibili nei moduli
Quando un campo contiene un errore: utilizzi aria-invalid="true", colleghi il messaggio di errore con aria-describedby e aggiorni il contenuto di role="alert". Questo approccio in tre parti garantisce che gli screen reader comunichino tutte le informazioni necessarie.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Verifica rapida
Quale attributo ARIA fornisce il nome accessibile di un elemento quando non esiste un'etichetta di testo visibile?
Riepilogo: nozioni essenziali su ARIA
Preferisca l'HTML nativo ad ARIA. Utilizzi aria-label per i pulsanti con icone. Utilizzi aria-labelledby per fare riferimento alle label visibili. Utilizzi aria-describedby per suggerimenti ed errori. Utilizzi aria-expanded per i widget di apertura. Utilizzi aria-hidden per i contenuti decorativi. Utilizzi aria-live per gli aggiornamenti dinamici dello stato. Utilizzi aria-invalid + role=alert per gli errori dei moduli.
Domande Frequenti
La lezione «ARIA e accessibilità: label, role, aria-*» è gratuita?
Sì — il testo completo di «ARIA e accessibilità: label, role, aria-*» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «ARIA e accessibilità: label, role, aria-*»?
Associ le label ai controlli, applichi i ruoli ARIA quando necessario e utilizzi aria-label e aria-describedby per supportare gli screen reader. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «ARIA e accessibilità: label, role, aria-*»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Controlli dei form: tipi input, select, textarea
- ARIA e accessibilità: label, role, aria-*
- HTML5 semantico: semantico a confronto con div soup
- Attributi di validazione dei form