HTML lang-Attribut: Sprache der Seite richtig angeben

Warum das wichtig ist

Ein Screenreader wählt Stimme und Ausspracheregeln nach der Sprachangabe der Seite. Steht dort nichts, nimmt er die Standardsprache des Geräts oder rät. Auf einem englisch eingestellten Rechner wird aus "Öffnungszeiten" dann ein Wortbrei. Wer blind ist und deine Seite so vorgelesen bekommt, ist nach drei Sätzen weg.

Die Angabe wirkt auch an Stellen, die man nicht sofort sieht. Browser entscheiden anhand von lang, ob sie eine Übersetzung anbieten. Die automatische Silbentrennung per CSS (hyphens: auto) funktioniert nur, wenn die Sprache stimmt, sonst bleiben lange deutsche Wörter auf dem Handy ungetrennt und sprengen die Zeile.

In den WCAG ist das Erfolgskriterium 3.1.1 Sprache der Seite zuständig, Stufe A. Es gehört damit zu jeder Prüfung nach WCAG 2.1 oder 2.2 auf Stufe AA, auf die sich in der EU die Norm EN 301 549 stützt. Ehrlich gesagt: Fürs Google-Ranking spielt lang kaum eine Rolle, Google erkennt die Sprache am sichtbaren Text. Der Punkt ist trotzdem einer der schnellsten Gewinne im ganzen Check, weil er in einer Zeile erledigt ist.

So prüfst du es selbst

checkfrei sucht das lang-Attribut am <html>-Element und prüft, ob ein gültiger Sprachcode drinsteht. Fehlt es, ist das ein Fehler. Mit dem kostenlosen Check siehst du das sofort. Von Hand dauert es eine Minute:

1. 01Öffne deine Seite im Browser und lass dir mit Strg+U (Mac: Cmd+Option+U) den Quelltext anzeigen.
2. 02Schau in die ersten Zeilen. Dort sollte etwas wie <html lang="de"> oder <html lang="de-DE"> stehen.
3. 03Alternativ öffnest du mit F12 die Entwicklertools, wechselst in die Konsole und tippst document.documentElement.lang ein. Kommt eine leere Zeichenkette zurück, fehlt die Angabe.

So behebst du es

Gültig sind Sprachcodes nach dem Standard BCP 47. Für Deutsch sind das de oder mit Region de-DE, de-AT und de-CH, für Englisch en oder etwa en-GB.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Bäckerei Sonnenschein</title>
</head>
<body>
  <p>Wir backen jeden Morgen ab 5 Uhr.</p>
  <p lang="en">We also speak English.</p>
</body>
</html>

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

Typische Fehler

• ·lang="de_DE" mit Unterstrich. So benennt WordPress intern seine Sprachdateien, im HTML ist das kein gültiger Code. Richtig ist der Bindestrich: de-DE.
• ·Eine englische Angabe auf einer deutschen Seite, meist ein Überbleibsel aus einem gekauften Theme. Das ist schlimmer als gar keine Angabe, weil der Screenreader dann ganz sicher mit englischer Stimme vorliest.
• ·Mehrsprachige Seiten, deren englische Version trotzdem lang="de" trägt. Jede Sprachversion braucht ihren eigenen Code, passend zu den hreflang-Angaben.
• ·Ausgeschriebene Namen wie lang="deutsch" oder ein leeres lang="".