Ich liebe Sprachen. Oder besser gesagt: Ich liebe es, neue Sprachen anzufangen. Französisch, Spanisch, Schwedisch, Chinesisch, Griechisch. Flüssig lesen kann ich davon eigentlich nur Schwedisch. Umso wichtiger ist es für mich – wie für viele andere auch –, dass Websites aus dem Ausland wenigstens eine englische Version anbieten.
Doch wenn die Sprachen auf einer Website nicht richtig ausgezeichnet oder der Sprachwechsel nicht zugänglich gestaltet ist, entstehen schnell Barrieren für Menschen, die Screenreader nutzen. Ja eigentlich für alle, die sich auf Sprachalternativen verlassen.
Wie kann man also mehrsprachige Websites barrierefrei umsetzen? Was macht einen Sprachumschalter barrierefrei? Und wie sage ich Screenreadern, in welcher Sprache gerade gesprochen wird? Das schauen wir uns diese Woche an.
Sprachen kennzeichnen mit dem HTML-Attribut lang
Wer mit dem Screenreader surft, hört Inhalte nicht einfach nur. Die Person hört sie in einer bestimmten Sprache. Damit das funktioniert, muss der Screenreader wissen, welche Sprache er sprechen soll. Genau dafür ist das lang-Attribut da. Es teilt dem Browser und assistiven Technologien mit, in welcher Sprache ein bestimmter Text geschrieben ist.
Fehlt diese Information, geraten Dinge schnell durcheinander. Ein deutsch eingestellter Screenreader wird einen englischen Text nicht korrekt aussprechen – selbst wenn der Text gut geschrieben ist. Das Ergebnis: Inhalte, die keiner versteht.
Auch Suchmaschinen und Übersetzungstools nutzen Sprachangaben, um Inhalte richtig einzuordnen. Wer sie weglässt, riskiert also nicht nur Barrieren für Menschen, sondern auch schlechtere Auffindbarkeit. Ein englisches „gift“ ist eben etwas ganz anderes, als das deutsche „Gift“ und man wird tunlichst vermeiden wollen, beim jeweils anderen gefunden zu werden.
Die Hauptsprache der Seite richtig auszeichnen
Die wichtigste Sprachangabe auf einer Website ist die Hauptsprache – also die Sprache, in der der Großteil des Inhalts verfasst ist. Diese wird im HTML-Element <html> mit dem lang-Attribut angegeben:
<!DOCTYPE html>
<html lang="de">Damit wird Browsern und assistiven Technologien mitgeteilt, dass die gesamte Seite hauptsächlich auf Deutsch ist. Der gesamte Text der Seite wird nun mit einem deutschsprachgigen Sprecher oder einer Sprecherin vorgelesen.
Das betrifft übrigens nicht nur mehrsprachige Websites. Auch eine einsprachig-deutsch-Vereinsseite benötigt die Auszeichnung der Hauptsprache, damit Screenreader und Suchmaschinen diese nutzen können.
Mit dem lang-Attribut anderssprachige Abschnitte kennzeichnen
Doch was, wenn gar nicht meine ganze Seite auf Deutsch ist? Wenn einzelne Begriffe, Zitate oder Absätze in einer anderen Sprache erscheinen? Dann reicht es nicht, nur im <html>-Tag die Hauptsprache zu definieren. Hier kommt das lang-Attribut an anderer Stelle ins Spiel – nämlich direkt an den anderssprachigen Textabschnitten.
Das kann ein einzelnes Wort sein, wie ein englischer Fachbegriff:
<p>Barrierefreiheit ist wichtig für eine gute <span lang="en">user experience</span>.</p>Oder ein ganzer Absatz, der in einer Fremdsprache steht:
<blockquote lang="fr">
L’accessibilité numérique est essentielle pour tous.
</blockquote>Durch diese gezielte Auszeichnung weiß der Screenreader, dass er an dieser Stelle die Aussprache und Sprachregeln der angegebenen Sprache verwenden soll. So werden Missverständnisse vermieden und der Text bleibt für alle Nutzer verständlich.
Sprachcodes – was steckt hinter den Kürzeln?
Wie Ihnen sicher schon aufgefallen ist, werden die Sprachen im lang-Attribut immer als Kürzel angegeben. Diese bestehen meist aus zwei Buchstaben, manchmal ergänzt durch ein Landeskürzel. Diese Codes folgen einem internationalen Standard namens BCP 47 (Best Current Practice 47).
Beispiele für Sprachcodes sind:
de— Deutschen— Englischfr— Französisches— Spanisch
Manche Sprachen unterscheiden sich je nach Region oder Land, deshalb können Sie die Codes erweitern, zum Beispiel:
en-US— Englisch, Variante für die USAen-GB— Englisch, Variante für Großbritannienes-MX— Spanisch, Variante für Mexikopt-BR— Portugiesisch, Variante für Brasilien
Diese genaueren Codes helfen Browsern, Screenreadern und Suchmaschinen, die Inhalte präzise zuzuordnen und korrekt auszugeben. Gerade bei Sprachen mit vielen regionalen Unterschieden ist das besonders wichtig. Schweizer Deutsch (de-CH) ist eben etwas anders als Deutsch, das in Deutschland gesprochen wird (de-DE).
Für Nerds, hier der Link zur Dokumentation: BCP 47 beim IETF
Eine vollständige Liste aller aktuell gültigen Sprachcodes (gepflegt von der IETF und IANA) gibt es auf der Seite der IANA.
Sprachumschalter – von Flaggen und Namen
Nun haben wir die Grundlagen geschaffen. Jede Variante unserer mehrsprachigen Website wurde mit der passenden Sprache ausgezeichnet. Doch wie wechseln die Nutzer zwischen all diesen Sprachversionen? Ein Sprachumschalter muss her. Nutzer wählen selbst welche Sprache sie gern lesen möchten. Doch wie umsetzen? Flaggen? Texte?
Sind Flaggen als Sprachwahl eine gute Idee?
Flaggen werden oft als visuelle Symbole für Sprachumschalter verwendet. Das Problem dabei ist: Flaggen gehören zu Ländern, nicht zu Sprachen. Eine Sprache kann in vielen verschiedenen Ländern gesprochen werden, und umgekehrt können in einem Land mehrere Sprachen existieren.
Ein bekanntes Beispiel ist Spanisch: In Südamerika sprechen viele Menschen Spanisch – dennoch wird die Sprachversion auf vielen Websites oft hinter der Flagge von Spanien versteckt. Für die Nutzerinnen und Nutzer in Mexiko, Argentinien oder Kolumbien ist das irritierend, da die Flagge ein anderes Land symbolisiert als ihren eigenen Kulturkreis.
Zwar haben Nutzerinnen und Nutzer sich inzwischen oft daran gewöhnt, ihre Sprachversion hinter einer bestimmten Flagge zu suchen. Trotzdem ist das ziemlich problematisch, weil es Verwirrung stiftet und die Vielfalt der Sprachen und Regionen nicht berücksichtigt.
Aus diesem Grund verschwinden Flaggen als Sprachauswahl (zurecht) zunehmend aus dem Webdesign. Stattdessen setzen viele Websites auf klare Sprachbezeichnungen in der jeweiligen Sprache – also zum Beispiel „Deutsch“, „English“ oder „Español“ – um die Wahl eindeutig und barrierefrei zu gestalten.
Den Sprachumschalter übersetzen?
Ein häufiger Fehler bei mehrsprachigen Websites ist, die Sprachnamen im Sprachumschalter nicht in der jeweiligen Landessprache anzugeben. Stattdessen sieht man häufig Bezeichnungen wie „Deutsch“, „Englisch“ oder „Spanisch“ – also in der Sprache der aktuellen Website.
Das führt schnell zu Verwirrung: Eine Nutzerin, die auf der chinesischen Version einer Website gelandet ist, kann mit „德语“ wenig anfangen, wenn sie kein Chinesisch spricht. Mit „Deutsch“ hätte sie wohl mehr anfangen können.
Deshalb gilt als guter Standard: Die Namen der Sprachen im Sprachwechsler sollten immer in der jeweiligen Zielsprache stehen. Also:
- „Deutsch“ statt „German“ für die deutsche Sprachversion
- „English“ statt „Englisch“ führt zur englischen Übersetzung
- „Español“ statt „Spanisch“ für Menschen, die mehr spanisch können als ich.
Auf diese Weise finden Nutzerinnen und Nutzer schnell und eindeutig ihre bevorzugte Sprache – auch wenn sie gerade eine fremdsprachige Seite besuchen.
Sprachumschalter auch technisch barrierefrei umsetzen
Ein Sprachwechsler ist natürlich nur dann barrierefrei, wenn er nicht nur inhaltlich klar, sondern auch technisch und gestalterisch zugänglich ist. Das bedeutet, dass er für alle Nutzergruppen erreichbar und verständlich sein muss – unabhängig davon, ob sie mit der Maus, der Tastatur oder einem Screenreader navigieren.
Wie bei allen anderen Inhaltselementen gilt also auch für Sprachumschalter:
- Kontrastanforderungen beachten
- etwaige Dropdowns screenreadertauglich beschriften (label, aria-label)
- Tastaturbedienbarkeit prüfen
Und wohin mit der Auswahl? Nun, am besten positionieren Sie sie am Anfang der Seite, direkt nach dem Logo noch vor der Hauptnavigation. So ist sie früh in der Tab-Reihenfolge erreichbar und kann direkt angesprungen werden. Gerade für Nutzerinnen und Nutzer, die versehentlich auf einer Seite in der falschen Sprache landen, ist das eine spürbare Erleichterung.
Fazit
Mehrsprachige Websites zu gestalten, bedeutet weit mehr, als nur Inhalte zu übersetzen. Es geht darum, Sprache sichtbar und zugänglich zu machen – für Menschen, für Maschinen, für alle. Wer das lang-Attribut korrekt einsetzt, vermeidet amüsante bis unverständliche Aussprachefehler und verbessert nebenbei die Auffindbarkeit in Suchmaschinen.
Auch beim Sprachumschalter steckt der Teufel im Detail. Flaggen sind keine Sprachen, und Sprachbezeichnungen gehören in die jeweilige Landessprache. Die gute Nachricht: All das lässt sich mit überschaubarem Aufwand umsetzen, wenn man es von Anfang an barrierearm denkt.