Dare un nome a più aree con aria-label
Distingua due nav affinché gli utenti sappiano quale stanno usando.
Dare un nome a più aree con aria-label è una lezione Web Accessibility 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 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.
Due nav, un problema
Molte pagine hanno un menu principale e un menu nel piè di pagina. Entrambi sono landmark nav e, senza nomi, risultano identici a uno screen reader.
Dare un nome a una regione
Aggiunga aria-label per assegnare a un landmark un nome breve pronunciato ad alta voce. Ora lo screen reader può distinguere i due nav.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Mantenere brevi le etichette
Un aria-label dovrebbe contenere un paio di parole, come Main o Breadcrumb. Gli utenti lo sentono pronunciare, quindi la brevità rispetta il loro tempo.
Non ripetere il ruolo
Scriva Footer, non Footer navigation. Lo screen reader pronuncia già navigation, quindi aggiungerlo di nuovo crea solo rumore.
<nav aria-label="Footer">...</nav>Riutilizzare un'intestazione visibile
Se una regione ha già un'intestazione visibile, la associ con aria-labelledby invece di scriverne il nome due volte.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label e labelledby
Usi aria-label quando non c'è testo visibile e aria-labelledby quando un'intestazione o un testo mostrato sullo schermo può fungere da nome.
Funziona con qualsiasi landmark
Dare un nome non serve solo per nav. Etichetti un aside o una sezione, così gli utenti sanno cosa contiene ogni regione.
<aside aria-label="Related">...</aside>Una sola regione, niente etichetta
Se una pagina contiene un solo nav, non ha bisogno di un'etichetta. Dare un nome è più importante quando due regioni condividono lo stesso ruolo.
I nomi distinti sono importanti
Assegni a ogni regione un nome distinto. Etichettare entrambi i nav come Menu vanifica lo scopo, perché gli utenti non riescono comunque a distinguerli.
Ascoltare la differenza
Con i nomi impostati, l'elenco dei landmark mostra Main navigation e Footer navigation, così gli utenti scelgono subito quello corretto. 🔊
Le etichette non sono visibili
Un aria-label viene pronunciato ma non mostrato sullo schermo: non cambia nulla visivamente, ma aiuta chi usa uno screen reader.
Verifica rapida
Ha due regioni nav. Qual è l'etichetta migliore per quella in fondo?
Riepilogo: dare un nome alle regioni
Ha imparato a etichettare i landmark ripetuti con aria-label o aria-labelledby, mantenendo i nomi brevi, distinti e privi del ruolo. 🙌
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 «Dare un nome a più aree con aria-label» è gratuita?
Sì — il testo completo di «Dare un nome a più aree con aria-label» è 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 «Dare un nome a più aree con aria-label»?
Distingua due nav affinché gli utenti sappiano quale stanno usando. 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 3 di 4.
Quanto tempo richiede la lezione «Dare un nome a più aree con aria-label»?
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
- header, nav, main, footer: i quattro grandi elementi
- Inserire i contenuti in main e usare un solo main
- Dare un nome a più aree con aria-label
- Navigazione tra landmark: come si spostano gli utenti