L’attributo lang e gli screen reader
Dichiarare la lingua della pagina e degli elementi per una pronuncia corretta
L’attributo lang e gli screen reader è una lezione HTML 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Funzione dell'attributo lang
L'attributo lang dichiara la lingua del contenuto di un elemento usando un tag linguistico BCP-47. I lettori di schermo lo usano per selezionare il motore di pronuncia e la voce corretti, mentre i motori di ricerca lo usano per indicizzare i contenuti in base alla lingua.
Impostazione sull'elemento html
Ogni pagina deve dichiarare la propria lingua principale sull'elemento radice: <html lang="en"> per l'inglese, <html lang="tr"> per il turco, <html lang="ja"> per il giapponese. In sua assenza, i lettori di schermo ricorrono alla lingua predefinita del sistema dell'utente e spesso pronunciano male ogni parola.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Tag BCP-47
I tag seguono lo standard BCP-47: un codice lingua (en, tr, ja), facoltativamente una regione (en-US, en-GB, zh-Hant, zh-Hans) e, raramente, uno script. Usi il tag più specifico che sia corretto; "en" da solo è sufficiente quando l'ortografia regionale non è importante.
Cambi di lingua all'interno della pagina
Per una sezione in una lingua diversa, la contrassegni con il proprio attributo lang: <blockquote lang="fr">Bonjour</blockquote>. Il lettore di schermo cambia voce per quella sezione, producendo una pronuncia corretta anche nelle pagine multilingue.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Selettori CSS per la lingua
Il CSS può selezionare la lingua tramite :lang(en): blockquote:lang(fr)::before { content: "« "; }. Il selettore corrisponde all'attributo lang dell'antenato più vicino. Lo usi per le convenzioni tipografiche, come virgolette e spaziatura, che variano a seconda della lingua.
Perché è importante per la pronuncia
La parola "Live" cambia pronuncia in inglese e in francese. In tedesco, "Wir" si pronuncia "veer", non "wear". Un lettore di schermo configurato per l'inglese pronuncerà male entrambe le parole, a meno che non gli venga indicato che la sezione circostante è in tedesco o in francese.
hreflang per le lingue collegate
L'attributo hreflang sui link (<a href="/fr/" hreflang="fr">Français</a>) comunica ai motori di ricerca e alle tecnologie assistive la lingua della pagina collegata. Lo abbini ai tag link hreflang presenti in tutto il sito per una copertura SEO internazionale completa.
Rilevare la lingua dell'utente
JavaScript può leggere le lingue preferite dell'utente da navigator.languages (un array di tag BCP-47 ordinati per priorità). Lo usi per scegliere una lingua predefinita o suggerire di cambiarla, ma rispetti sempre la scelta esplicita dell'utente, dando priorità a questa rispetto all'impostazione predefinita del browser.
Rilevamento lato server
L'header di richiesta HTTP Accept-Language elenca le preferenze linguistiche dell'utente ricavate dalla configurazione del browser. Lo usi sul server per inviare il giusto HTML localizzato alla prima richiesta, così l'utente visualizza la propria lingua prima dell'esecuzione di JavaScript.
Più lingue nella stessa pagina
Gli articoli di Wikipedia, le app per l'apprendimento delle lingue e i dizionari mescolano regolarmente più lingue. Contrassegni ogni brano con il proprio attributo lang, anche quando è breve. Senza un lang specifico per ogni sezione, la voce del lettore di schermo e le virgolette CSS tornano alle impostazioni predefinite della pagina.
Errori comuni
Tra gli errori più comuni ci sono l'assenza di lang su <html>, l'uso del codice di lingua sbagliato (lang="english" invece di lang="en") e l'uso di codici regionali quando è sufficiente indicare la lingua. Usi il validatore W3C e il controllo di accessibilità Lighthouse per individuarli nella CI.
Verifica delle conoscenze
Perché l'attributo lang su è particolarmente importante per gli utenti che usano lettori di schermo?
Riepilogo
Dichiari la lingua della pagina su <html> con un tag BCP-47 (en, tr, ja, zh-Hant). Contrassegni i cambi di lingua all'interno della pagina con attributi lang su span o section, così i lettori di schermo possono cambiare voce. :lang() in CSS può applicare stili tipografici specifici per la lingua. Imposti sempre lang: non costa nulla e migliora notevolmente la pronuncia dei lettori di schermo, la SEO e la selezione CSS.
Domande Frequenti
La lezione «L’attributo lang e gli screen reader» è gratuita?
Sì — il testo completo di «L’attributo lang e gli screen reader» è 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 «L’attributo lang e gli screen reader»?
Dichiarare la lingua della pagina e degli elementi per una pronuncia corretta 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 1 di 4.
Quanto tempo richiede la lezione «L’attributo lang e gli screen reader»?
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
- L’attributo lang e gli screen reader
- dir=rtl per il testo da destra a sinistra
- Gli elementi bdi e bdo
- charset e gestione Unicode: caratteri speciali