aria-label aria-labelledby e aria-describedby
Fornire nomi e descrizioni accessibili per gli elementi
aria-label aria-labelledby e aria-describedby è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Perché i nomi accessibili sono importanti
Ogni elemento interattivo richiede un nome accessibile: una stringa di testo che la tecnologia assistiva utilizza per identificarlo. Senza un nome accessibile, gli screen reader non possono comunicare agli utenti la funzione di un pulsante o di un campo di input.
aria-label
aria-label fornisce direttamente su un elemento un nome accessibile testuale:
<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
aria-label provides the name: 'Close dialog, button' -->
<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->aria-labelledby
aria-labelledby identifica un altro elemento come nome accessibile:
<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
<!-- Form's accessible name is 'Billing Information' -->
</form>
<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->aria-describedby
aria-describedby fornisce una descrizione estesa (come integrazione del nome):
<label for="pwd">Password</label>
<input
type="password"
id="pwd"
aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->Etichetta e descrizione
La differenza tra nome accessibile e descrizione:
- Nome accessibile — identifica l'elemento (aria-label, aria-labelledby o un elemento label)
- Descrizione — integra il nome con informazioni aggiuntive (aria-describedby)
- Gli screen reader annunciano: nome, ruolo, stato → poi la descrizione
aria-label sui landmark
Utilizzi aria-label per distinguere più landmark dello stesso tipo:
<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<!-- Screen reader landmark list:
'Primary, navigation'
'Breadcrumb, navigation' -->
<!-- When only one nav, aria-label is optional but still helpful -->aria-labelledby sulle sezioni
Colleghi le sezioni alle relative intestazioni per fornire contesto agli screen reader:
<section aria-labelledby="about-heading">
<h2 id="about-heading">About Our Team</h2>
<p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->aria-label e testo visibile
aria-label sostituisce il testo visibile — presti attenzione:
<button aria-label="Delete account permanently">
Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
Sighted user reads: 'Delete' -->
<!-- Best practice: visible text and aria-label should agree
If possible, include extra context in visible text too:
<button>Delete account permanently</button> -->
<!-- aria-label should start with the visible text when possible
for speech recognition users who use voice commands -->aria-describedby per gli errori
Colleghi i messaggi di errore ai relativi campi di input:
<label for="email">Email</label>
<input
type="email"
id="email"
aria-describedby="email-error"
aria-invalid="true"
>
<span id="email-error" role="alert">
Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
'Email [field], invalid. Please enter a valid email address.' -->Più riferimenti aria-describedby
aria-describedby può fare riferimento a più elementi:
<input
type="password"
aria-label="New password"
aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->Etichette visibili e nascoste
Quando non è possibile utilizzare un'etichetta visibile, utilizzi la classe sr-only:
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">
/* Visually hidden but in accessibility tree: */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}Verifica rapida
Qual è la differenza tra aria-label e aria-labelledby?
Riepilogo: etichette ARIA
Elementi essenziali dei nomi accessibili:
aria-label— nome testuale inline per gli elementi privi di etichette visibiliaria-labelledby— fa riferimento tramite id a un testo visibile esistentearia-describedby— descrizione supplementare (letta dopo il nome)- Preferisca le etichette visibili e gli elementi label dell'HTML nativo
- aria-label sui landmark distingue più aree dello stesso tipo
Domande Frequenti
La lezione «aria-label aria-labelledby e aria-describedby» è gratuita?
Sì — il testo completo di «aria-label aria-labelledby e aria-describedby» è 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «aria-label aria-labelledby e aria-describedby»?
Fornire nomi e descrizioni accessibili per gli elementi Eserciti HTML 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 HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML 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 3 di 4.
Quanto tempo richiede la lezione «aria-label aria-labelledby e aria-describedby»?
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 HTML Academy?
Sì. Ogni lezione HTML 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
- Quando usare ARIA invece dell’HTML nativo
- role button alert dialog e landmark
- aria-label aria-labelledby e aria-describedby
- aria-hidden e aria-live