Sprachattribut lang= und mehrsprachige Webseiten barrierefrei

Ein einziges vergessenes Attribut kann dafür sorgen, dass ein Screenreader deutschen Text mit englischer Aussprache vorliest oder umgekehrt. Das Sprachattribut lang= gehört zu den unscheinbarsten, aber am häufigsten falsch gesetzten Bausteinen barrierefreier Webseiten – und ist gleichzeitig eine der am schnellsten behebbaren Baustellen.

Dieser Beitrag erklärt, was die WCAG-Kriterien 3.1.1 und 3.1.2 konkret verlangen, wie das lang-Attribut im HTML-Tag und bei fremdsprachigen Textabschnitten korrekt gesetzt wird, worauf Sprachumschalter achten müssen und welche Fehler bei automatisch übersetzten Inhalten besonders häufig vorkommen.

WCAG 3.1.1 und 3.1.2 im Überblick

Die WCAG 2.1 enthalten zwei Erfolgskriterien, die sich speziell mit der Sprachauszeichnung befassen. Das Kriterium 3.1.1 "Sprache der Seite" auf Konformitätsstufe A verlangt, dass jede Webseite die Hauptsprache ihres Inhalts maschinenlesbar angibt. Das Kriterium 3.1.2 "Sprache von Textabschnitten" auf Stufe AA geht einen Schritt weiter und verlangt, dass auch einzelne fremdsprachige Passagen innerhalb einer Seite entsprechend markiert werden.

Beide Kriterien klingen unscheinbar, haben aber direkte Auswirkung auf die Erfahrung von Screenreader-Nutzenden. Eine Sprachausgabe wählt automatisch die passende Ausspracheregel und Stimme anhand der ausgezeichneten Sprache. Fehlt diese Angabe oder ist sie falsch, entsteht im schlimmsten Fall eine kaum verständliche Vorlesung, bei der deutsche Wörter nach englischen Ausspracheregeln vorgelesen werden oder umgekehrt.

Da bf-check.de auf BFSG-Konformität nach EN 301 549 und WCAG 2.1 AA prüft, gehört die korrekte Sprachauszeichnung zu den Grundprüfpunkten, die auf praktisch jeder Seite überprüfbar sind.

Das lang-Attribut im html-Tag korrekt setzen

Die Basis jeder Sprachauszeichnung ist das lang-Attribut im öffnenden html-Tag der Seite, zum Beispiel <html lang="de"> für deutschsprachigen Inhalt. Dieser Wert gilt als Standardsprache für die gesamte Seite und wird von jeder Sprachausgabe als erste Referenz genutzt.

Wichtig ist die korrekte Sprachkürzel-Schreibweise nach dem international gebräuchlichen Format: de für Deutsch, en für Englisch, pl für Polnisch. Bei regionalen Varianten lässt sich das Kürzel erweitern, etwa de-AT für österreichisches Deutsch oder en-GB für britisches Englisch, wenn diese Unterscheidung für die Aussprache relevant ist.

Ein häufiger Fehler: Das lang-Attribut wird beim Aufsetzen der Seite einmal korrekt gesetzt, bei einem späteren Relaunch oder Theme-Wechsel aber versehentlich entfernt oder auf einen falschen Wert zurückgesetzt, etwa wenn ein Template-System standardmäßig en vorgibt und dies bei der Lokalisierung übersehen wird. Ein kurzer Blick in den Quelltext der Seite zeigt schnell, ob das Attribut vorhanden und korrekt ist.

Fremdsprachige Passagen im Text auszeichnen

Über das grundlegende Seiten-lang hinaus verlangt WCAG 3.1.2, dass einzelne fremdsprachige Textabschnitte innerhalb einer Seite ebenfalls markiert werden. Ein englisches Zitat in einem deutschen Artikel, ein französischer Firmenname in einer Produktbeschreibung oder ein polnischer Absatz in einer zweisprachigen Anleitung sollten jeweils mit einem eigenen lang-Attribut auf dem umschließenden Element versehen werden, etwa <span lang="en">a piece of cake</span>.

Das gilt nicht für einzelne Fremdwörter, die im allgemeinen Sprachgebrauch längst eingedeutscht sind, wie "Computer" oder "Team". Es geht um erkennbar fremdsprachige Sätze oder Absätze, bei denen die Aussprache sich merklich unterscheidet und eine falsche Sprachzuordnung die Verständlichkeit spürbar beeinträchtigt.

In der Praxis lohnt sich diese Auszeichnung besonders bei Blogs mit eingebetteten Zitaten aus fremdsprachigen Quellen, bei internationalen Teamseiten mit Originalnamen oder bei Produktseiten, die fremdsprachige Markennamen enthalten.

Sprachumschalter barrierefrei auszeichnen

Mehrsprachige Webseiten bieten meist einen Sprachumschalter an, über den Besucherinnen und Besucher zwischen den verfügbaren Sprachversionen wechseln können. Damit dieser barrierefrei funktioniert, braucht er zunächst ein eindeutiges, verständliches Label – ein reines Flaggen-Icon ohne Textalternative ist für Screenreader-Nutzende nicht aussagekräftig, und Flaggen sind ohnehin problematisch, weil eine Sprache nicht zwingend an ein einzelnes Land gebunden ist.

Besser geeignet sind Textlabels in der jeweiligen Zielsprache selbst, etwa "Deutsch", "English", "Polski", kombiniert mit dem lang-Attribut auf dem jeweiligen Link, damit ein Screenreader auch den Namen der Sprache korrekt ausspricht. Zusätzlich sollte der aktuell aktive Sprachlink klar als solcher erkennbar sein, etwa über aria-current="true", damit Nutzende wissen, in welcher Sprachversion sie sich gerade befinden.

Technisch wichtig: Ein Wechsel der Sprache sollte tatsächlich auf eine eigene URL mit passendem lang-Attribut im html-Tag führen, statt den Inhalt nur per JavaScript auszutauschen, ohne dass sich die Sprachauszeichnung der Seite mit ändert.

Auswirkung auf die Aussprache von Screenreadern

Die praktische Wirkung des lang-Attributs lässt sich am besten selbst nachvollziehen: Aktiviere die Sprachausgabe deines Betriebssystems oder eines Screenreaders und lass dir einen Satz mit falschem oder fehlendem Sprachattribut vorlesen. Häufig entsteht dabei eine Aussprache, die einzelne Wörter korrekt trifft, an Satzmelodie und Betonung aber deutlich hinter einer sauber ausgezeichneten Version zurückbleibt.

Bei komplett fehlendem lang-Attribut greift die Sprachausgabe meist auf eine System-Standardsprache zurück, die nicht zwingend mit dem tatsächlichen Seiteninhalt übereinstimmt. Das kann bei einer überwiegend englischsprachig konfigurierten Sprachausgabe dazu führen, dass deutsche Inhalte durchgängig mit englischer Aussprache vorgelesen werden – für längere Texte eine erhebliche Verständnishürde.

Für Sehbehinderte, die zusätzlich eine Bildschirmlupe mit Sprachausgabe nutzen, verstärkt sich der Effekt zusätzlich, weil sie stärker auf das Gehör angewiesen sind als rein sehende Nutzende, die Fehlaussprachen leicht überlesen können.

Häufige Fehler bei automatisch übersetzten Inhalten

Automatische Übersetzungswerkzeuge und KI-gestützte Übersetzungsdienste erleichtern die Mehrsprachigkeit erheblich, bringen aber eigene Fehlerquellen mit. Ein verbreitetes Problem: Der übersetzte Inhalt wird korrekt angezeigt, das lang-Attribut der Seite bleibt aber auf der Ursprungssprache stehen, weil die Übersetzung nur clientseitig im Browser stattfindet, ohne das zugrunde liegende HTML-Dokument anzupassen.

Ein weiteres Fehlerbild entsteht, wenn ein Content-Management-System zwar mehrsprachige Inhalte verwaltet, aber alle Sprachversionen über dieselbe Basis-Vorlage mit fest codiertem lang="de" ausliefert. In diesem Fall zeigt die englische oder polnische Version der Seite optisch korrekten Text, aber ein technisch falsches Sprachattribut.

Auch bei automatisch generierten Untertiteln für Videos lohnt sich ein Blick auf die Sprachauszeichnung der Untertitel-Datei selbst, da Übersetzungs-Plugins diese oft nicht mit anpassen.

Checkliste für mehrsprachige Unternehmenswebseiten

Für Unternehmen mit mehrsprachigem Auftritt lohnt sich eine kurze, wiederkehrende Prüfung: Stimmt das lang-Attribut im html-Tag mit der tatsächlichen Hauptsprache jeder Sprachversion überein? Sind erkennbar fremdsprachige Textabschnitte, Zitate und Produktnamen einzeln ausgezeichnet? Führt der Sprachumschalter zu eigenen URLs mit korrektem Sprachattribut, statt nur den sichtbaren Text auszutauschen? Sind die Sprachlinks selbst mit verständlichem Textlabel statt reiner Flaggen-Grafik versehen?

Diese Prüfung lässt sich gut in bestehende Redaktionsprozesse einbauen, etwa als fester Punkt in der Checkliste vor Veröffentlichung neuer mehrsprachiger Inhalte. Ein automatisierter Scan über bf-check.de erkennt fehlende oder inkonsistente lang-Attribute zuverlässig und ist ein guter Ausgangspunkt, um mehrsprachige Auftritte systematisch zu prüfen, bevor eine tiefere manuelle Kontrolle folgt.

Hinweis: Dieser Beitrag bietet allgemeine technische Hinweise zur Sprachauszeichnung nach WCAG und ersetzt keine individuelle rechtliche Bewertung deiner konkreten Webseite.

Häufig gestellte Fragen