3.1.1 Language of Page

WCAG - Definition

Die Standardsprache einer Seite muss im Code angegeben werden.
Dadurch können Screenreader und andere Assistive Technologien die richtige Aussprache, Betonung und Sprachprofile wählen.

Bedeutung

Die Angabe der Hauptsprache ist eine der Grundvoraussetzungen für Barrierefreiheit.

  • Screenreader & Sprachausgaben: Nur mit der richtigen Spracheinstellung wird der Text korrekt ausgesprochen (z. B. „house“ → englisch / „Haus“ → deutsch).

  • Übersetzungsdienste (z. B. Browser-Übersetzungen) erkennen die Ausgangssprache korrekt.

  • Rechtschreib- und Grammatikprüfungen im Browser können angepasst werden.

  • Hilfreich für Menschen mit:

    • Sehbehinderungen oder Blindheit,

    • Legasthenie oder Sprachlernproblemen,

    • Nutzer*innen, die Inhalte in einer Fremdsprache lesen.

Fehlt die Angabe, geraten Nutzer*innen schnell ins „Sprachchaos“, weil die Software Wörter falsch betont, verschluckt oder unverständlich vorliest.

Ausreichende Techniken

1. HTML lang-Attribut setzen

Die einfachste und wichtigste Technik ist, das lang-Attribut im Root-Element (<html>) korrekt zu setzen.

Beispiel für deutsche Seite:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Beispielseite</title>
</head>
<body>
  <h1>Herzlich willkommen</h1>
  <p>Dies ist ein deutscher Text.</p>
</body>
</html>

Dynamische Sprache bei CMS oder Frameworks

Bei mehrsprachigen Websites (z. B. WordPress, Contao, TYPO3) muss das Attribut automatisch je nach Sprachversion gesetzt werden.

<html lang="<?= $this->language ?>">

Serverseitige Generierung

Auch Templates oder Frameworks (z. B. Twig, Blade, React SSR) können das lang-Attribut dynamisch aus einer Sprachvariable setzen:

<html lang="{{ app.request.locale }}">

Meta-Tags ergänzen (optional)

Meta-Tags wie Content-Language können zusätzlich genutzt werden, ersetzen aber nicht das lang-Attribut.

<meta http-equiv="Content-Language" content="de">

Beratungstechniken

  • Immer prüfen, ob die Sprache im Root-Element gesetzt ist.

  • Nicht weglassen, auch wenn eine Seite „nur deutsch“ ist. Screenreader brauchen diese Information.

  • Bei mehrsprachigen Seiten darauf achten, dass jede Sprachversion den richtigen Wert trägt (z. B. de, en, fr).

  • Einheitlich ISO-639-1 Codes verwenden (zwei Buchstaben, z. B. de, en).

  • Bei regionalen Varianten präzisieren (de-AT, de-CH, en-GB, en-US).

Fehler

  • Fehlendes lang-Attribut: Screenreader raten dann, oft falsch.

  • Falsche Sprache angegeben: z. B. lang="en" auf einer deutschen Seite. Ergebnis: Deutsche Texte werden englisch ausgesprochen.

  • Nur meta gesetzt, aber nicht lang am <html> → nicht ausreichend.

  • Falsche Codes (z. B. ger statt de, engl statt en).

  • Dynamische Webseiten: Sprache bleibt „de“, obwohl die User auf „en“ wechseln.