accessibility

Atribut lang en HTML per a lectors de pantalla

MetricSpot llegeix l'atribut `lang` del `<html>`. Sense ell, els lectors de pantalla trien la veu de pronunciació equivocada i la tecnologia assistiva no pot canviar d'idioma.

Què comprova aquesta auditoria

Llegeix l’atribut lang de l’element arrel <html>. El valor ha de ser una etiqueta d’idioma BCP 47 vàlida (en, en-GB, es, ca, pt-BR, etc.).

Per què importa

Els lectors de pantalla com NVDA, JAWS i VoiceOver utilitzen aquest atribut per triar el sintetitzador de veu i la pronunciació correctes. Un lang que falta llegeix contingut en anglès amb la veu que l’usuari té per defecte, sovint espanyol o alemany, produint un text incomprensible. WCAG 3.1.1 ho marca com a requisit de nivell A; la European Accessibility Act (en vigor des del juny de 2025) tracta el lang que falta com un defecte de compliment.

Els motors de cerca també hi confien per detectar l’idioma, juntament amb hreflang i altres senyals de contingut.

Com solucionar-ho

Defineix l’atribut a l’element arrel:

<html lang="ca">

Per a variants regionals, utilitza un subtag BCP 47:

<html lang="en-US">  <!-- Anglès dels EUA -->
<html lang="pt-BR">  <!-- Portuguès del Brasil -->
<html lang="zh-Hant"><!-- Xinès tradicional -->

Astro: defineix-ho a src/layouts/BaseLayout.astro:

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

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

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

WordPress: viu a header.php:

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

language_attributes() ja emet lang="ca" (o el codi que correspongui) segons Settings → General → Site Language. No el sobreescriguis a mà.

Pàgines multilingües: afegeix lang a l’element envoltant quan el contingut canvia d’idioma a mig camí:

<p>Els francesos en diuen <span lang="fr">la mode</span>.</p>

Així és com <span lang="fr"> es llegeix amb veu francesa en lloc de masegar l’accent.

Si també serveixes diverses localitzacions, combina-ho amb etiquetes hreflang perquè Google enviï la localització correcta a l’usuari correcte.

Preguntes freqüents

Quina és la diferència entre lang i xml:lang?

lang és l’atribut HTML; xml:lang és el seu equivalent XHTML/XML. Per a documents HTML5, utilitza només lang. Per a documents poliglots (rars avui dia), defineix els dos amb el mateix valor.

Puc deixar lang fora si detecto l’idioma amb JavaScript?

No. Els lectors de pantalla analitzen l’HTML abans que s’executi JS, i molts usuaris de tecnologia assistiva desactiven JS del tot. L’atribut ha d’estar a l’HTML estàtic.

Per què Lighthouse marca lang="" com a invàlid?

Una cadena buida no és una etiqueta BCP 47 vàlida. Defineix un codi d’idioma real o treu l’atribut (pitjor: la comprovació encara fallarà). El mateix s’aplica a lang="default" o altres valors de placeholder que vénen amb alguns temes de CMS.

Fonts

Última actualització 2026-05-11