Was bewirkt das lang-Attribut am html-Element?

Es teilt assistiver Technologie und Browsern mit, in welcher Sprache die Seite verfasst ist, damit ein Screenreader die passende Stimme und Aussprache verwendet, statt zu raten.

Wie behebe ich eine fehlende Seitensprache?

Ergänzen Sie am ` `-Element ein `lang`-Attribut mit dem korrekten BCP-47-Sprachcode – etwa de für Deutsch oder en für Englisch. Bei gemischtsprachigen Inhalten kennzeichnen Sie einzelne Passagen mit eigenem `lang`.

Welches WCAG-Kriterium verlangt eine Seitensprache?

SC 3.1.1 (Sprache der Seite), Stufe A. axe-core meldet es als `html-has-lang`.

Häufige Verstöße

Fehlende Seitensprache: Die Ein-Attribut-Lösung

Screenreader lesen Text nicht nur laut vor – sie wenden eine komplette Ausspracheeinheit an, die auf die Phonetik einer bestimmten Sprache abgestimmt ist. Ohne mitgeteilt zu bekommen, in welcher Sprache eine Seite verfasst ist, greifen die meisten Screenreader auf eine Standardeinstellung zurück (oft US-Englisch), was die Aussprache jeder anderen Sprache verfälscht: Französisch, Deutsch, Ukrainisch, Japanisch – alles mit englischen Ausspracheregeln vorgelesen, was zwischen leicht falsch und völlig unverständlich liegt.

Branchendaten beziffern dies auf etwa 42 % der ADA-Beschwerden zur Web-Barrierefreiheit. Es ist WCAG-Erfolgskriterium 3.1.1 (Sprache der Seite), eine Anforderung der Stufe A, und kommt einer Ein-Zeilen-Lösung so nahe, wie es bei Barrierefreiheitsproblemen nur geht.

Die Lösung

Fügen Sie dem <html>-Element ein lang-Attribut mit einem gültigen BCP-47-Sprachcode hinzu:

<!-- Vorher -->
<html>

<!-- Nachher -->
<html lang="de">

Gängige Codes: de (Deutsch), en (Englisch), uk (Ukrainisch), fr (Französisch), es (Spanisch), ja (Japanisch). Regionsvarianten funktionieren auch – de-AT für österreichisches Deutsch, de-CH für Schweizer Deutsch –, obwohl der reine zweibuchstabige Basiscode allein ausreicht, um den Kernverstoß zu beheben.

Die verwandte Prüfung: Sprache von Teilen

Wenn eine einzelne Seite tatsächlich Sprachen mischt – ein deutscher Artikel, der zum Beispiel einen Absatz auf Englisch zitiert –, verlangt WCAG 3.1.2 (Sprache von Teilen, Stufe AA), dass auch der konkrete fremdsprachige Abschnitt markiert wird, damit der Screenreader seine Ausspracheeinheit mitten auf der Seite umschalten kann:

<p>Wie man auf Englisch sagt, <span lang="en">it is what it is</span>.</p>

Dies ist eine engere, seltener benötigte Lösung als das seitenweite lang-Attribut – die meisten Websites müssen nur das übergeordnete <html lang="..."> korrekt setzen, und nur inhaltsstarke mehrsprachige Websites müssen daran denken, einzelne Abschnitte zu markieren.

Warum sich dieser Punkt zuerst zu beheben lohnt

Weil er mechanisch trivial ist (ein Attribut, eine Zeile, null Auswirkung auf Design oder Layout) und buchstäblich auf jeder Seite einer Website erscheint, wenn er in der Basisvorlage fehlt, ist dies oft die einzige Lösung mit dem höchsten Hebel bei einer ersten Prüfung – einmal in einer gemeinsamen Layout-Datei behoben, löst sich der Verstoß website-weit sofort auf.

Offizielle Referenzen

Häufige Fragen

Was bewirkt das lang-Attribut am html-Element?: Es teilt assistiver Technologie und Browsern mit, in welcher Sprache die Seite verfasst ist, damit ein Screenreader die passende Stimme und Aussprache verwendet, statt zu raten.
Wie behebe ich eine fehlende Seitensprache?: Ergänzen Sie am `<html>`-Element ein `lang`-Attribut mit dem korrekten BCP-47-Sprachcode – etwa de für Deutsch oder en für Englisch. Bei gemischtsprachigen Inhalten kennzeichnen Sie einzelne Passagen mit eigenem `lang`.
Welches WCAG-Kriterium verlangt eine Seitensprache?: SC 3.1.1 (Sprache der Seite), Stufe A. axe-core meldet es als `html-has-lang`.