Il calcolo del nome accessibile, senza misteri
Scoprire come il browser decide come chiamare un elemento
Il calcolo del nome accessibile, senza misteri è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 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 Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Che cos'è un nome accessibile
Il nome accessibile è l'etichetta breve che uno screen reader pronuncia per un elemento, ad esempio Invia per un pulsante o Cerca per un campo.
Perché è importante
Se un elemento non ha un nome accessibile, uno screen reader annuncia solo il suo ruolo, ad esempio pulsante, lasciando gli utenti senza capire che cosa faccia.
Il browser lo calcola
Raramente impostate il nome direttamente. Il browser applica un algoritmo di calcolo del nome al markup per stabilire come chiamare ogni elemento.
Segue un ordine
L'algoritmo controlla le origini secondo un ordine di priorità fisso e usa la prima disponibile. Conoscere quest'ordine permette di prevedere il risultato.
aria-labelledby ha la precedenza
La priorità più alta spetta a aria-labelledby. Se presente, sostituisce ogni altra origine e raccoglie il testo degli elementi a cui fa riferimento.
<button aria-labelledby="t">x</button>
<span id="t">Close menu</span>Segue aria-label
Se labelledby non è presente, il browser usa aria-label, una stringa inserita direttamente nell'elemento come nome pronunciato.
<button aria-label="Close">x</button>Poi la denominazione nativa
Seguono le origini native, come una label associata a un input o il testo alternativo di un'immagine. Usatele ogni volta che potete.
<label for="email">Email</label>
<input id="email">Poi il contenuto stesso
Per molti elementi il nome deriva dal loro contenuto testuale. Un pulsante con il testo Salva si chiama Salva senza alcun attributo aggiuntivo.
<button>Save</button>title è l'ultima risorsa
L'origine con la priorità più bassa è l'attributo title. Assegna un nome all'elemento solo quando non esiste nulla di meglio ed è facile non accorgersene.
I nomi vengono normalizzati
Il nome calcolato viene appiattito in un'unica stringa, comprimendo gli spazi superflui, perciò interruzioni di riga e rientri non arrivano all'utente.
Nome e descrizione
Il nome indica come viene chiamato un elemento; una descrizione aggiunge dettagli letti dopo il nome. Oggi ci concentriamo sull'impostazione corretta del nome.
Verifica rapida
Un elemento ha sia aria-label sia testo interno. Quale dei due diventa il suo nome?
Riepilogo: come vengono creati i nomi
Avete imparato l'ordine del calcolo del nome: labelledby, poi aria-label, quindi le label e il contenuto nativi, con title per ultimo. 🧩
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Il calcolo del nome accessibile, senza misteri» è gratuita?
Sì — il testo completo di «Il calcolo del nome accessibile, senza misteri» è 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 Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Il calcolo del nome accessibile, senza misteri»?
Scoprire come il browser decide come chiamare un elemento Eserciti Web Accessibility 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 Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility 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 1 di 4.
Quanto tempo richiede la lezione «Il calcolo del nome accessibile, senza misteri»?
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 Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility 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
- Il calcolo del nome accessibile, senza misteri
- aria-label vs aria-labelledby
- aria-describedby per un contesto aggiuntivo
- Errori comuni nei nomi che rendono silenziosi i controlli