accessibility

HTML-lang für Screenreader

MetricSpot liest das `lang`-Attribut auf `<html>`. Ohne wählen Screenreader die falsche Stimme und assistive Technik kann die Sprache nicht wechseln.

Was diese Prüfung macht

Liest das lang-Attribut auf dem Wurzelelement <html>. Der Wert muss ein gültiger BCP 47-Sprachtag sein (en, en-GB, de, de-AT, pt-BR usw.).

Warum es zählt

Screenreader wie NVDA, JAWS und VoiceOver nutzen dieses Attribut, um den passenden Sprachsynthesizer und die korrekte Aussprache zu wählen. Fehlt lang, liest der Reader englische Inhalte mit der vom Nutzer voreingestellten Stimme — oft deutsch oder spanisch, mit kauderwelschartigem Ergebnis. WCAG 3.1.1 macht dies zu einer Level-A-Anforderung; das EU-Barrierefreiheitsgesetz (seit Juni 2025 in Kraft) wertet fehlendes lang als Compliance-Mangel.

Auch Suchmaschinen stützen sich neben hreflang und Inhaltssignalen darauf zur Sprachenerkennung.

So behebst du es

Setze das Attribut auf dem Wurzelelement:

<html lang="de">

Für regionale Varianten nutzt du einen BCP 47-Subtag:

<html lang="de-DE">  <!-- Deutsches Deutsch -->
<html lang="de-AT">  <!-- Österreichisches Deutsch -->
<html lang="pt-BR">  <!-- Brasilianisches Portugiesisch -->
<html lang="zh-Hant"><!-- Traditionelles Chinesisch -->

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

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

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

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

WordPress: liegt in header.php:

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

language_attributes() gibt bereits lang="de-DE" auf Basis von Einstellungen → Allgemein → Sprache der Website aus. Überschreibe das nicht hart.

Mehrsprachige Seiten: setze lang am umschließenden Element, wenn der Inhalt mitten auf der Seite die Sprache wechselt:

<p>Die Franzosen nennen es <span lang="fr">la mode</span>.</p>

Genau das sorgt dafür, dass <span lang="fr"> mit französischer Stimme gelesen wird, statt den Akzent zu verstümmeln.

Wenn du außerdem mehrere Locales ausspielst, kombiniere das mit hreflang-Tags, damit Google das richtige Locale zum richtigen Nutzer schickt.

Häufig gestellte Fragen

Was ist der Unterschied zwischen lang und xml:lang?

lang ist das HTML-Attribut; xml:lang ist sein XHTML/XML-Pendant. Für HTML5-Dokumente reicht lang. Für polyglotte Dokumente (heute selten) setzt du beide auf denselben Wert.

Kann ich lang weglassen, wenn ich die Sprache per JavaScript erkenne?

Nein. Screenreader parsen das HTML, bevor JS läuft, und viele Nutzer assistiver Technologien deaktivieren JS vollständig. Das Attribut muss im statischen HTML stehen.

Warum kennzeichnet Lighthouse lang="" als ungültig?

Ein leerer String ist kein gültiger BCP 47-Tag. Entweder setzt du einen echten Sprachcode oder entfernst das Attribut (schlechter — die Prüfung scheitert trotzdem). Dasselbe gilt für lang="default" oder andere Platzhalterwerte, mit denen manche CMS-Themes ausgeliefert werden.

Quellen

Zuletzt aktualisiert 2026-05-11