Praxisleitfaden Sprache im HTML

HTML-Sprachangaben abstimmen

Widersprüchliche Angaben erkennen und passend zur Inhaltssprache korrigieren.

html-xml-lang-mismatchWCAG 3.1.1

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Markierter Befund · Warnung · WCAG 3.1.1lang=de, xml:lang=en

Widerspruch erkennen

Ein Dokument meldet Deutsch und Englisch

Schematische Einordnung des Befunds
Erkannter Befund

Scanner-Signal

Am html-Element stehen lang="de" und xml:lang="en". Axe meldet html-xml-lang-mismatch.

Technische Einordnung

Regel
html-xml-lang-mismatch
Referenz
WCAG 3.1.1

Die Regel vergleicht die Basissprache beider Attribute am Dokumentelement. Hier widersprechen sich de und en, obwohl die Einführung zur Asymptote auf Deutsch verfasst ist. Die sichtbare Textgestaltung verrät diesen Fehler nicht.

Bedeutung im Nutzungskontext

Sprachangaben unterstützen die passende Aussprache durch Sprachausgaben. Widersprüchliche Angaben machen die Sprachdeklaration uneindeutig; der konkrete Effekt hängt davon ab, wie Browser und assistive Technik das Dokument verarbeiten.

Diagnose vor der Korrektur
<html lang="de" xml:lang="en">
lang: Deutsch
xml:lang: Englisch
Axe: unterschiedliche Basissprachen am html-Element

Sprachattribute aus derselben Quelle pflegen

Prüfen Sie Vorlagen, die beide Attribute ausgeben. Die Werte müssen zur jeweiligen Sprachfassung passen.

Illustratives Beispiel · Widersprüchliche Sprachangaben
Gemeinsamer UrsprungHTML-DokumentvorlageDie konkrete Verwendung entscheidet mit.
  • Einführung Befund im Beispiel
  • Aufgabenseite Befund im Beispiel
  • Englische Einführung Ohne diesen Befund im Beispiel

Nach der Änderung erneut prüfenVergleichen Sie lang, xml:lang und Hauptinhalt jeder Sprachfassung.

Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.

Welcher Sprachwert ist hier richtig?

Lesen Sie die Seite, bevor Sie Attribute angleichen. Gleiche Werte können gemeinsam falsch sein.

Umsetzungen im Vergleich
FallWann trifft er zu?Passende Umsetzung
Deutscher HauptinhaltWie im Beispiel erklären Überschrift und Fließtext das Thema auf Deutsch. Behalten Sie lang="de" und korrigieren Sie das vorhandene xml:lang ebenfalls auf de.
Andere SprachfassungDie geöffnete Seite enthält beispielsweise überwiegend englischen Text. Leiten Sie beide Werte aus dieser Sprachfassung ab. Übernehmen Sie de nicht pauschal aus diesem Beispiel.
Einzelne fremdsprachige PassageNur ein Abschnitt wechselt die Sprache, während der Hauptinhalt deutsch bleibt. Behalten Sie die deutsche Dokumentsprache und kennzeichnen Sie die abweichende Passage mit einem passenden lang-Attribut.

Originalbeleg lesen

Deutscher Inhalt, widersprüchliche Metadaten

Der vollständige Einstieg der Kalibrierseite zeigt „Asymptote“ mit der deutschsprachigen Einführung. Die Markierung ordnet den sichtbaren Inhalt zu; der geprüfte Knoten ist das übergeordnete html-Element.

Der Befundlang=de, xml:lang=en

Die Erklärung ist deutsch. Dennoch meldet das Dokument neben Deutsch auch Englisch. Die Korrektur wird deshalb im Attributvergleich sichtbar, während der Seitenausschnitt gleich bleibt.

Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Warnung · WCAG 3.1.1lang=de, xml:lang=en

Attribute korrigieren

xml:lang an die deutsche Seite anpassen

Das Beispiel behält lang="de" bei und ersetzt allein xml:lang="en" durch xml:lang="de". Text und Darstellung ändern sich dabei nicht. Wenn beide Attribute ausgegeben werden, verwenden Sie denselben passenden Sprachwert.

Was sich im Code ändert

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

Entfällt
en
Kommt hinzu
de

Im Seitentemplate Prüfen Sie die Spracheinstellung des CMS und das Template für das html-Element. lang ist die Sprachangabe für HTML; xml:lang stammt aus XML. Eine gewöhnliche HTML-Seite benötigt xml:lang nicht zusätzlich. Wird es bereits ausgegeben, darf es lang nicht widersprechen.

Vollständigen Code vergleichen
KorrekturvergleichHTML-Dokumentelement

Vorher

<html lang="de" xml:lang="en">

Nachher

<html lang="de" xml:lang="de">

Markierte Zeilen wurden geändert

Ausgabe absichern

Die Sprachfassung steuert das Dokument

Vermeiden Sie getrennt gepflegte Sprachwerte im Grundtemplate und in der Übersetzung.

  1. 1

    Ermitteln Sie die Hauptsprache aus dem tatsächlichen Seiteninhalt, einschließlich Navigation und zentraler Texte.

  2. 2

    Nutzen Sie für beide ausgegebenen Attribute denselben gültigen BCP-47-Sprachwert aus der gewählten Sprachfassung.

  3. 3

    Prüfen Sie das ausgelieferte html-Element auf jeder Sprachroute und nach einem Sprachwechsel.

  4. 4

    Kennzeichnen Sie längere anderssprachige Passagen am jeweiligen Element und kontrollieren Sie die Sprachausgabe im Kontext.

Fehlkorrekturen vermeiden

Übereinstimmung allein reicht nicht

Beide Werte auf en setzen

Damit verschwindet der Widerspruch, aber die deutsche Asymptoten-Erklärung erhält eine falsche Dokumentsprache. Der Regelpass bewertet diese Inhaltsentscheidung nicht.

lang löschen

xml:lang allein ersetzt die Sprachangabe einer HTML-Seite nicht. Lassen Sie die erforderliche lang-Angabe am html-Element bestehen.

Nur den Absatz ändern

lang="de" an der Einführung gleicht die widersprüchlichen Angaben am html-Element nicht an. Korrigieren Sie den gemeldeten Dokumentknoten.

Basissprache mit exakter Übereinstimmung verwechseln

Diese Axe-Regel prüft die Basissprache. Ein Pass ist kein Beleg, dass regionale Zusätze vollständig übereinstimmen. Geben Sie bei beiden Attributen denselben zur Seite passenden Sprachwert aus.

Gleiche Darstellung, korrigierte Sprachangabe

Im geprüften Beispiel besteht das ursprüngliche html-Element nach der Änderung die Regel html-xml-lang-mismatch. Die Rohaufnahmen vor und nach der Korrektur sind pixelgleich.

So prüfen Sie die Korrektur nach

  • Öffnen Sie die veröffentlichte Sprachfassung und lesen Sie beide Werte am html-Element aus.
  • Führen Sie html-xml-lang-mismatch erneut aus und kontrollieren Sie das Ergebnis für genau dieses Dokument.
  • Vergleichen Sie die deklarierte Sprache mit dem Inhalt und hören Sie zentrale Passagen mit einer passenden Sprachausgabe ab.

Bestätigt ist die behobene Attributabweichung an diesem Dokument. Andere Regeln, die gesamte Aussprache und vollständige Barrierefreiheit sind damit nicht nachgewiesen.

Beispiel im Prüfbericht Gelöst
GelöstBeide Attribute melden DeutschAxe bestätigt dieselbe Basissprache am ursprünglichen html-Element. Der Text wurde nicht übersetzt oder neu gestaltet.
Diagnose nach der Korrektur
<html lang="de" xml:lang="de">
lang: Deutsch
xml:lang: Deutsch
Axe: gleiche Basissprache; Prüfung am html-Element bestanden

Prüfgrenze verstehen

Was die Regel erkennt und was Sie beurteilen

Der automatische Vergleich prüft Sprachwerte. Ob diese den Inhalt richtig beschreiben, bleibt eine eigene Prüfung.

Automatisch prüfbar

  • Unterschiedliche Basissprachen von lang und xml:lang am html-Element erkennen.
  • Den betroffenen Dokumentknoten mit seinen tatsächlichen Attributwerten benennen.
  • Nach der Reparatur dieselbe Regel am erhaltenen Knoten erneut ausführen.

Im Kontext zu entscheiden

  • Die Hauptsprache anhand des Inhalts bestimmen.
  • Regionale Sprachvarianten und fremdsprachige Abschnitte passend kennzeichnen.
  • Die Aussprache wichtiger Inhalte mit der eingesetzten assistiven Technik beurteilen.

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.