Praxisleitfaden Sprachcode im HTML

Ungültige Sprachcodes korrigieren

Erkennen Sie ungültige Angaben und hinterlegen Sie die tatsächliche Hauptsprache.

html-lang-validWCAG 3.1.1

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Markierter Befund · Kritisch · WCAG 3.1.1 · Ziel: htmlDokument mit lang="xx-sioux"

Befund verstehen

Ein Attribut ist vorhanden, sein Wert wird nicht erkannt

Die Beispielseite „Sieben Feuer“ enthält deutschen Fließtext. Ihr Dokument ist jedoch mit xx-sioux ausgezeichnet. Axe erkennt diesen Wert nicht als gültige Sprachangabe. Der Befund betrifft das gesamte Dokument, nicht nur den markierten Absatz.

Warum das relevant ist

Sprachausgaben können sich an der Dokumentsprache orientieren. Ein unbrauchbarer Wert gibt ihnen keine verlässliche Grundlage für die Aussprache des deutschen Textes.

Befund im BeispielErkannter Befund

Scanner-Signal

html-lang-valid meldet am html-Element den Wert lang="xx-sioux".

Regel
html-lang-valid
Referenz
WCAG 3.1.1
Diagnose am Dokument
Selektor: html
Vorher: <html lang="xx-sioux">
Axe: Sprachwert nicht in der Liste gültiger Sprachen
Gelesener Hauptinhalt: Deutsch

Ungültige Sprachwerte lokalisieren

Ordnen Sie erkannte Sprachwerte ihren Dokumenten zu. Ob ein gültiger Code zur Hauptsprache passt, beurteilen Sie anschließend inhaltlich.

Illustratives Beispiel · Ungültige Sprachcodes

3 von 100 Seiten3 % mit diesem Befund im Beispiel

Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.

Betroffene Seiten im Beispiel: 14, 55, 78.

97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.

Der Inhalt entscheidet über den Ersatzwert

Wählen Sie den Code nach der Sprache der Seite, nicht nach ihrem Thema.

Umsetzungen im Vergleich
FallWann trifft er zu?Passende Umsetzung
Deutscher FließtextÜberschriften und Erläuterungen sind wie auf „Sieben Feuer“ auf Deutsch verfasst. Setzen Sie lang="de" am html-Element. Die erwähnten Eigennamen ändern die Hauptsprache nicht.
Andere SprachfassungEine übersetzte Seite hat eine andere Hauptsprache. Hinterlegen Sie deren passenden Sprachcode in der jeweiligen Seitenvorlage; übernehmen Sie de nicht ungeprüft.
Fremdsprachige PassagenEinzelne Abschnitte weichen von der Hauptsprache ab. Behalten Sie die Hauptsprache am Dokument und prüfen Sie die Sprachkennzeichnung dieser Passagen gesondert.

Seitenkontext lesen

Deutscher Text hinter einer ungültigen Sprachangabe

Der vollständige Einstieg zeigt Überschrift, Erläuterung und Ratsfeuer-Grafik. Der markierte Absatz macht die verwendete Sprache nachvollziehbar; das geprüfte Element bleibt html.

Der BefundDokument mit lang="xx-sioux"

Der Text erklärt auf Deutsch die Begriffe Dakota, Lakota und Nakota. Dass diese Namen vorkommen, rechtfertigt keine erfundene Dokumentsprache xx-sioux. Der unsichtbare Fehler steht im öffnenden html-Tag.

Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 3.1.1 · Ziel: htmlDokument mit lang="xx-sioux"

Sprachwert ersetzen

xx-sioux durch de ersetzen

Ändern Sie den vorhandenen lang-Wert zu de. Die Hauptsprache der Beispielseite wird dadurch maschinenlesbar angegeben. Text, Grafik und Layout bleiben unverändert.

Was sich im Code ändert

Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.

Entfällt
xx-sioux
Kommt hinzu
de

In Vorlage oder CMS Korrigieren Sie die Dokumentsprache in der HTML-Vorlage oder der Spracheinstellung dieser Seitenfassung. Kontrollieren Sie anschließend den tatsächlich ausgelieferten html-Tag.

Vollständigen Code vergleichen
KorrekturvergleichHTML-Dokumentsprache

Vorher

<html lang="xx-sioux">

Nachher

<html lang="de">

Markierte Zeilen wurden geändert

Änderung umsetzen

Die Sprachangabe bis zur ausgelieferten Seite verfolgen

Die Einstellung muss dort ankommen, wo Browser und Prüfwerkzeug das Dokument lesen.

  1. 1

    Öffnen Sie die betroffene Sprachfassung und bestimmen Sie ihre Hauptsprache anhand des Inhalts.

  2. 2

    Prüfen Sie den lang-Wert direkt am html-Element, nicht nur eine Spracheinstellung im Backend.

  3. 3

    Ersetzen Sie den ungültigen Wert in der zuständigen Vorlage durch den passenden Sprachcode.

  4. 4

    Rufen Sie die veröffentlichte URL erneut auf und kontrollieren Sie, ob die Änderung auch nach Navigation oder Sprachwechsel erhalten bleibt.

Fehlkorrekturen vermeiden

Ein gültiger Code kann trotzdem die falsche Sprache nennen

Irgendeinen akzeptierten Wert einsetzen

lang="en" ist ein erkannter Sprachcode, passt aber nicht zum deutschen Haupttext dieser Seite. Ein grüner Regeltest bestätigt diese inhaltliche Zuordnung nicht.

Den Themenbegriff zur Sprache machen

Das Thema „Sioux“ beschreibt den Gegenstand der Seite. Es ist kein Ersatz für die Sprache, in der die Erläuterungen verfasst sind.

Das Attribut löschen

Ohne lang fehlt die Dokumentsprache. Prüfen Sie dann zusätzlich html-has-lang; das Entfernen des ungültigen Werts ist keine vollständige Reparatur.

Nur den Absatz kennzeichnen

Ein lang="de" am sichtbaren Absatz korrigiert den ungültigen Wert am html-Element nicht. Beheben Sie den Befund an seinem tatsächlichen Ziel.

Die Regel besteht mit de am selben Dokumentelement

Im erneuten Lauf besteht html-lang-valid am unverändert vorhandenen html-Element mit lang="de". Die ursprünglichen Bildpixel sind vor und nach der Reparatur identisch.

So prüfen Sie die Korrektur nach

  • Im gerenderten Dokument steht lang="de" am html-Element.
  • html-lang-valid meldet für dieses Element einen bestandenen Test und keinen Verstoß.
  • Vergleichen Sie die Kennzeichnung fachlich mit dem Haupttext und prüfen Sie die Aussprache mit einer geeigneten Sprachausgabe.

Der Nachweis gilt für diese Regel am Beispiel. Die Kalibrierseite enthält weitere Barrieren; vollständige Barrierefreiheit und korrektes Vorlesen sind damit nicht bestätigt.

Beispiel im Prüfbericht Gelöst
GelöstGültiger Sprachcode de gesetzthtml-lang-valid besteht am selben html-Element. Der Code de entspricht dem deutschsprachigen Haupttext dieses Beispiels.
Nachweis nach der Änderung
Selektor: html
Nachher: <html lang="de">
Axe html-lang-valid: bestanden
Sichtbare Darstellung: unverändert
Inhaltsabgleich: deutscher Haupttext passt zu de

Prüfgrenze kennen

Erkannter Sprachcode und richtige Inhaltssprache getrennt prüfen

Der automatische Befund beantwortet eine engere Frage als die vollständige Sprachprüfung.

Automatisch prüfbar

  • Den vorhandenen lang-Wert am html-Element auf einen erkannten Sprachcode prüfen.
  • Den ungültigen Wert mit dem betroffenen Dokument verknüpfen.
  • Den Regeltest nach einer Änderung am selben Element wiederholen.

Im Kontext zu entscheiden

  • Abgleichen, ob der Code die tatsächliche Hauptsprache des Inhalts beschreibt.
  • Fremdsprachige Passagen und ihre Kennzeichnung im Zusammenhang beurteilen.
  • Prüfen, ob eine Sprachausgabe mit den vorhandenen Stimmen sinnvoll zwischen Sprachen wechselt.

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Der Website-Check ist bereit.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.