Die Regel valid-lang meldet ein lang-Attribut an einem Element innerhalb der Seite – einem Zitat, einem Link im Sprachumschalter, einem Absatz –, dessen Wert kein gültiger Sprachcode ist, etwa fr_FR oder französisch. Screenreader können für diese Passage nicht auf die richtige Aussprache umschalten. Die Lösung ist ein korrekt geschriebener Code: lang="fr".
Was die Regel bedeutet
WCAG 3.1.2 Sprache von Teilen verlangt, dass Software die Sprache jeder Passage oder Wendung ermitteln kann, die von der Seitensprache abweicht. In HTML zeichnen Sie eine solche Passage mit lang an dem Element aus, das sie umschließt.
valid-lang prüft jedes Element außer <html>, das lang (oder xml:lang) trägt. Die Regel nimmt den Teil vor dem ersten Bindestrich und vergleicht ihn mit der Liste bekannter Sprachcodes von axe-core. Sie schlägt an bei:
- Locale-Bezeichnern mit Unterstrich:
fr_FR,de_DE; - Sprachnamen statt Codes:
französisch,english; - Codes, die es nicht gibt, etwa
dkfür Dänisch (richtig:da).
Nicht gemeldet werden:
- ein leeres
lang=""– das ist erlaubt und bedeutet „Sprache unbekannt“; - Elemente ohne eigenen Text, etwa ein leeres
<span lang="xx">; - eine anderssprachige Passage ganz ohne
lang. Das ist der häufigste Verstoß gegen 3.1.2, und keine automatische Regel findet ihn, weil dazu jemand die Sprache erkennen muss.
WCAG 3.1.2 kennt Ausnahmen: Eigennamen, Fachbegriffe, Wörter unbestimmter Sprache und Wörter, die Teil der umgebenden Sprache geworden sind – etwa „Computer“ oder „Team“ im Deutschen –, brauchen kein lang.
Wen es betrifft
Vor allem blinde und sehbehinderte Menschen mit Screenreader. Screenreader wie NVDA, JAWS und VoiceOver können beim Sprachwechsel die Stimme umstellen – aber nur, wenn das Markup es mit einem lesbaren Code sagt. Mit einem ungültigen Code wird ein französisches Zitat auf einer deutschen Seite mit deutscher Aussprache vorgelesen und ist schwer zu verstehen. Dasselbe gilt für Übersetzungswerkzeuge und für Menschen, die sich Texte zur Unterstützung beim Lesen vorlesen lassen.
Warum die Prüfung anschlägt
- Sprachumschalter, die an jedem Link die CMS-Locale ausgeben:
lang="de_DE",lang="fr_FR". - Übersetzungs-Plugins, die übersetzte Textteile mit ihren internen Locale-Bezeichnern umschließen.
- Sprachnamen aus einem Redaktionsfeld, etwa
lang="englisch"aus der Sprachauswahl eines Texteditors. - Tippfehler und Ländercodes:
lang="jp"stattja,lang="dk"stattda. - Nicht ersetzte Platzhalter im Template, etwa
lang="{{ item.locale }}".
So beheben Sie es
- Finden Sie die Quelle des Werts – meist das Template des Sprachumschalters oder das Plugin, das Übersetzungen auszeichnet.
- Schreiben Sie BCP-47-Codes: den Sprachcode, optional mit Bindestrich und Region (
fr,fr-CA). Unterstriche werden zu Bindestrichen. - Zeichnen Sie bei der Gelegenheit anderssprachige Passagen aus, die noch gar kein
langhaben – auf die weist die Regel Sie nie hin.
<!-- Vorher: Locale-Bezeichner im Sprachumschalter -->
<nav class="sprachwahl" aria-label="Sprache">
<a href="/en/" hreflang="en" lang="en_GB">English</a>
<a href="/fr/" hreflang="fr" lang="fr_FR">Français</a>
</nav><!-- Nachher: gültige Sprachcodes, jeder Name wird in seiner Sprache vorgelesen -->
<nav class="sprachwahl" aria-label="Sprache">
<a href="/en/" hreflang="en" lang="en">English</a>
<a href="/fr/" hreflang="fr" lang="fr">Français</a>
</nav>Ein anderssprachiges Zitat zeichnen Sie genauso aus – an dem Element, das genau diese Passage enthält:
<p>Das Motto des Hauses lautet <q lang="fr">Liberté, égalité, fraternité</q>.</p>So prüfen Sie es von Hand
- Listen Sie in der Browserkonsole alle Sprachwechsel auf:
document.querySelectorAll('[lang]'). Prüfen Sie jeden Wert gegen das IANA-Register der Sprachcodes. - Lesen Sie die Seite und suchen Sie nach anderssprachigen Wörtern und Passagen ohne
lang– Zitate, Produktnamen, die ganze Sätze sind, Song- oder Filmtitel, die Namen der anderen Sprachversionen im Umschalter. - Hören Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) bei eingeschalteter automatischer Sprachumschaltung hin: Wechselt die Stimme dort, wo die Sprache wechselt?
- Denken Sie an die Ausnahmen: Eigennamen und eingebürgerte Lehnwörter brauchen keine Auszeichnung.
Zugehöriges WCAG-Kriterium
3.1.2 Sprache von Teilen, Stufe AA. Verwandt: 3.1.1 Sprache der Seite für die Seitensprache am <html>-Element, die dasselbe Codeformat nutzt.
So meldet Reviseberg diese Regel
Reviseberg führt valid-lang auf jeder gecrawlten Seite bei 1280 px aus. Sprachumschalter stehen im Header, deshalb erscheint ein ungültiger Code dort als ein Element pro Sprachlink auf jeder Seite. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium 3.1.2 und Stufe, der Zahl der Elemente und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der Selektor, der HTML-Ausschnitt mit dem ungültigen Wert und alle betroffenen Seiten. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.
Weil Passagen ganz ohne lang automatisch nicht zu finden sind, macht ein Crawl ohne Befund 3.1.2 nicht zu einem bestandenen Kriterium: Es gilt als teilweise geprüft, bis ein Mensch ein manuelles Ergebnis erfasst.
Verwandte Regeln
- undefined – dieselbe Prüfung für die Seitensprache am
<html>-Element. - undefined – die Seite hat gar keine Sprache.
- undefined – Links, etwa im Sprachumschalter, brauchen einen lesbaren Namen.
Sprachauszeichnung auf Ihrer ganzen Website prüfen – kostenloser Scan