Praxisleitfaden Sprachwechsel im HTML

Sprachwechsel korrekt auszeichnen

Ungültige Sprachkennungen erkennen, passend ersetzen und die Fundstelle erneut prüfen.

valid-langWCAG 3.1.2

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Markierter Befund · Kritisch · WCAG 3.1.2Ungültige Kennung xx-invalid

Befund verstehen

Die Wörter sind lesbar, ihre Sprachkennung ist ungültig

Schematische Einordnung des Befunds
Erkannter Befund

Scanner-Signal

valid-lang meldet am span-Element den ungültigen Wert lang="xx-invalid".

Technische Einordnung

Regel
valid-lang
Referenz
WCAG 3.1.2

In der Liefernotiz steht der italienische Ausdruck „Segno antico“ innerhalb eines deutschen Satzes. Sein eigenes lang-Attribut enthält keine gültige Sprachkennung. Der Scanner erkennt diesen Attributfehler; er bestimmt damit noch nicht die tatsächliche Sprache der Wörter.

Bedeutung im Nutzungskontext

Eine Sprachausgabe kann die passende Aussprache nur wählen, wenn sie eine nutzbare Sprachinformation erhält. Die ungültige Kennung verhindert eine verlässliche Zuordnung dieses Ausdrucks zu Italienisch.

Diagnose vor der Korrektur
Element: .chargenbereich span[lang]
Text: Segno antico
lang: xx-invalid
Axe valid-lang: Verstoß
Tatsächliche Sprache des Ausdrucks: Italienisch

Sprachwechsel im Inhalt nachprüfen

Prüfen Sie erkannte ungültige Kennungen direkt an ihren Textpassagen. Die tatsächliche Sprache bleibt eine redaktionelle Entscheidung.

Illustratives Beispiel · Ungültige Sprachwechsel

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: 9, 37, 81.

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

Welcher Text gehört zu welcher Sprache?

Wählen Sie den Sprachwert nach dem Inhalt und begrenzen Sie seinen Geltungsbereich.

Umsetzungen im Vergleich
FallWann trifft er zu?Passende Umsetzung
Anderssprachiger AusdruckEine Passage wechselt tatsächlich die Sprache, wie „Segno antico“ in dieser deutschen Liefernotiz. Kennzeichnen Sie den Ausdruck mit lang="it". Der anschließende deutsche Satz bleibt außerhalb dieses Elements.
Gleiche Sprache wie der umgebende TextDas markierte Element enthält dieselbe Sprache wie sein korrekt ausgezeichnetes Elternelement. Korrigieren Sie die eigene Kennung oder entfernen Sie die unnötige Überschreibung, damit das Element die richtige Sprache erbt.
Eigenname oder eingebürgerter BegriffEin Wort ist ein Eigenname, Fachbegriff oder bereits Bestandteil der Umgebungssprache. Beurteilen Sie die Ausnahmen von WCAG 3.1.2 im Kontext. Eine fremde Herkunft allein bedeutet nicht, dass ein Sprachwechsel ausgezeichnet werden muss.

Fundstelle ansehen

Der italienische Ausdruck in der vollständigen Liefernotiz

Der Ausschnitt umfasst die Überschrift, den betroffenen Satz und die darunterliegenden Chargenfelder. Die Markierung umfasst den Satz; sein italienischer Ausdruck „Segno antico“ ist die geprüfte Fundstelle.

Der BefundUngültige Kennung xx-invalid

„Segno antico“ trägt die ungültige Kennung xx-invalid. Die Wörter und ihr deutscher Begleitsatz bleiben bei der Reparatur sichtbar gleich; die Diagnose und der Codevergleich machen den unsichtbaren Unterschied nachvollziehbar.

Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 3.1.2Ungültige Kennung xx-invalid

Kennung korrigieren

Italienisch nur am italienischen Ausdruck setzen

Ersetzen Sie xx-invalid durch it am bestehenden span-Element. Das Dokument besitzt bereits lang="de". Durch das geschlossene span endet die italienische Auszeichnung vor dem deutschen Begleitsatz.

Was sich im Code ändert

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

Entfällt
xx-invalid
Kommt hinzu
it

Im Redaktionssystem Markieren Sie nur die fremdsprachige Passage und wählen Sie deren Sprache im Editor. Prüfen Sie nach dem Speichern im gerenderten HTML, ob die Auswahl tatsächlich ein lang-Attribut erzeugt.

Vollständigen Code vergleichen
KorrekturvergleichHTML des betroffenen Ausdrucks

Vorher

<span lang="xx-invalid">Segno antico</span>

Nachher

<span lang="it">Segno antico</span>

Markierte Zeilen wurden geändert

Sauber umsetzen

Sprachinformation bis in die veröffentlichte Seite erhalten

Die richtige Kennung muss am richtigen Element ankommen, auch nach Import und Veröffentlichung.

  1. 1

    Verwenden Sie einen passenden BCP-47-Sprachtag; it bezeichnet hier Italienisch. Freie Redaktionsbezeichnungen sind keine Sprachcodes.

  2. 2

    Setzen Sie lang an den kleinsten sinnvollen Abschnitt, der den gesamten anderssprachigen Ausdruck umfasst.

  3. 3

    Prüfen Sie bei verschachtelten Elementen, ob eine eigene Sprachangabe die geerbte Sprache versehentlich überschreibt.

  4. 4

    Kontrollieren Sie den veröffentlichten DOM nach Import, Vorlagenverarbeitung und dynamischem Nachladen.

Fehlkorrekturen vermeiden

Eine gültige Kennung kann trotzdem falsch sein

de einsetzen, weil die Seite deutsch ist

de ist ein gültiger Sprachwert und kann den Regeltest bestehen. Für den italienischen Ausdruck wäre die Zuordnung dennoch falsch. Lesen Sie deshalb den betroffenen Text.

Das gesamte Dokument auf Italienisch umstellen

Die Hauptsprache bleibt Deutsch. Eine Änderung am html-Element würde den Geltungsbereich unnötig ausweiten; Dokument-Sprachangaben werden außerdem durch eigene Regeln geprüft.

Die Kennung ersatzlos löschen

Dieser Ausdruck würde dann die deutsche Dokumentsprache erben. Ein verschwundener Attributfehler belegt keine korrekte Kennzeichnung des Sprachwechsels.

Nur eine Flagge oder einen sichtbaren Hinweis ergänzen

Ein Länderbild oder der Text „Italienisch“ ersetzt das lang-Attribut nicht. Die Sprachinformation muss am betreffenden Inhalt programmatisch bestimmbar sein.

Die Kennung ist gültig, die sichtbare Notiz bleibt gleich

Nach der Änderung findet Axe am selben span-Element einen gültigen Sprachwert und meldet einen Pass für valid-lang. Der erfasste Ausschnitt ist vor der Befundmarkierung pixelgleich mit dem korrigierten Zustand.

Im Beispiel dokumentiert

Gelöst

Am Ausdruck „Segno antico“ wurde lang="xx-invalid" durch lang="it" ersetzt. Die Dokumentsprache bleibt de.

Was Sie zusätzlich beurteilen müssen

Der belegte Pass gilt für valid-lang an diesem Ausdruck. Die weiteren Elemente der Kalibrierseite wurden nicht repariert. Das Ergebnis bestätigt weder alle Sprachwechsel noch vollständige Barrierefreiheit.

Gültigkeit prüfen, Sprachzuordnung fachlich beurteilen

Prüfauftrag für Ihre Umsetzung

  • Kontrollieren Sie lang="it" am Ausdruck „Segno antico“ und lang="de" am Dokument.
  • Führen Sie valid-lang erneut aus und ordnen Sie das Ergebnis demselben Element zu.
  • Prüfen Sie die Aussprache ergänzend mit einer Sprachausgabe mit deutscher und italienischer Stimme; prüfen Sie die Sprachgrenze zusätzlich im HTML.
Beispiel im Prüfbericht Gelöst
GelöstGültige italienische Sprachkennung gesetztAxe bestätigt am selben span einen Pass für valid-lang. Die Sprachzuordnung zum italienischen Ausdruck wurde anhand des Textes gewählt.
Diagnose nach der Korrektur
Element: .chargenbereich span[lang]
Text: Segno antico
lang: it
Dokumentsprache: de
Axe valid-lang: Pass
Sichtbare Pixel: unverändert

Prüfgrenzen kennen

Gültigkeit prüfen, Sprachzuordnung fachlich beurteilen

valid-lang prüft vorhandene Sprachwerte an Inhaltselementen. WCAG 3.1.2 verlangt darüber hinaus eine passende Kennzeichnung der Sprache im Kontext.

Automatisch prüfbar

  • Ungültige lang-Werte an den von der Regel erfassten Inhaltselementen erkennen.
  • Die betroffene Stelle mit Selektor und Screenshot zuordnen.
  • Den korrigierten Wert an derselben Fundstelle erneut auf Gültigkeit prüfen.

Im Kontext zu entscheiden

  • Bestimmen, welche Sprache tatsächlich gesprochen wird und wo ein Sprachwechsel beginnt und endet.
  • Fehlende Sprachwechsel sowie gültige, aber inhaltlich falsche Kennungen erkennen.
  • Ausnahmen für Eigennamen, Fachbegriffe und eingebürgerte Wörter beurteilen und die Sprachausgabe ergänzend erproben.

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.