accessibility

HTML lang per screen reader

MetricSpot legge l'attributo `lang` su `<html>`. Senza, gli screen reader scelgono la voce sbagliata e gli ausili tecnici non sanno cambiare lingua.

Cosa verifica questo controllo

Legge l’attributo lang sull’elemento radice <html>. Il valore deve essere un tag di lingua BCP 47 valido (en, en-GB, es, pt-BR, ecc.).

Perché è importante

Gli screen reader come NVDA, JAWS e VoiceOver usano questo attributo per scegliere il sintetizzatore vocale e la pronuncia corretti. Un lang mancante legge il contenuto inglese con qualunque voce l’utente ha impostato come predefinita — spesso italiana o tedesca, producendo un risultato incomprensibile. WCAG 3.1.1 lo rende un requisito di Livello A; l’European Accessibility Act (in vigore da giugno 2025) considera la mancanza di lang un difetto di conformità.

Anche i motori di ricerca si appoggiano a questo segnale per rilevare la lingua, insieme a hreflang e ai segnali di contenuto.

Come sistemarlo

Imposta l’attributo sull’elemento radice:

<html lang="it">

Per varianti regionali, usa un subtag BCP 47:

<html lang="en-US">  <!-- inglese USA -->
<html lang="pt-BR">  <!-- portoghese del Brasile -->
<html lang="zh-Hant"><!-- cinese tradizionale -->

Astro: imposta in src/layouts/BaseLayout.astro:

<html lang={Astro.currentLocale ?? "it"}>

Next.js (App Router): in app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="it"><body>{children}</body></html>;
}

WordPress: vive in header.php:

<html <?php language_attributes(); ?>>

language_attributes() emette già lang="it-IT" basandosi su Impostazioni → Generali → Lingua del sito. Non sovrascriverlo a mano.

Pagine multilingua: aggiungi lang sull’elemento contenitore quando il contenuto cambia lingua a metà pagina:

<p>I francesi la chiamano <span lang="fr">la mode</span>.</p>

È questo che fa leggere <span lang="fr"> con una voce francese, invece di storpiare l’accento.

Se servi più locali, abbina questo controllo ai tag hreflang così Google manda la lingua giusta all’utente giusto.

Domande frequenti

Qual è la differenza tra lang e xml:lang?

lang è l’attributo HTML; xml:lang è il suo equivalente XHTML/XML. Per documenti HTML5 usa solo lang. Per documenti polyglot (oggi rari), imposta entrambi allo stesso valore.

Posso omettere lang se rilevo la lingua con JavaScript?

No. Gli screen reader parsano l’HTML prima che il JS giri, e molti utenti di tecnologie assistive disabilitano del tutto JS. L’attributo deve essere nell’HTML statico.

Perché Lighthouse segnala lang="" come non valido?

Una stringa vuota non è un tag BCP 47 valido. O imposti un vero codice di lingua o rimuovi l’attributo (peggio — il controllo continua a fallire). Lo stesso vale per lang="default" o altri valori segnaposto che alcuni temi CMS portano di default.

Fonti

Ultimo aggiornamento 2026-05-11