Sprachselektor: Vermeide diese 10 Fehler auf deiner Website

Du hast deine Website übersetzen lassen. Texte abgestimmt, Fachbegriffe geprüft, alles fertig. Jetzt muss jemand nur noch die richtige Sprache finden. Die steckt hinter einer winzigen Flagge, irgendwo zwischen Login und einem Icon, dessen Bedeutung vermutlich nur der Designer kennt.

Im Layout sah das vermutlich ordentlich aus. Für jemanden, der gerade kein Wort versteht, ist die Sprachauswahl allerdings die wichtigste Stelle auf der Seite. Hier findest du zehn typische Fehler beim Sprachselektor und erfährst, wie du sie vermeidest.

1. Verwende Sprachnamen statt Flaggen

Welche Sprache wählst du mit der Schweizer Flagge? Eben. Schreib die Sprachen aus, statt Besucher ihre Sprachkenntnisse geografisch einsortieren zu lassen.

Trenne dabei Sprache und Lieferland. Wer deinen Shop auf Englisch lesen möchte, hat damit noch keinen Umzug nach London beauftragt.

2. Mach die Auswahl einfach

Ein verständliches Menü braucht keine aufwendige Animation. Besucher wollen eine Sprache wählen; für eine kleine Bühnenshow sind sie vermutlich nicht gekommen.

Bei wenigen Sprachen sind direkte Links eine gute Option. Bei vielen kann ein Dropdown Platz sparen. Wähle die Form danach, wie schnell man damit ans Ziel kommt. Das W3C beschreibt die Vor- und Nachteile von Auswahllisten.

3. Schreib Sprachnamen so, dass man sie erkennt

Zeige Eigennamen wie "Español" oder "日本語". Eine ergänzende Bezeichnung wie "日本語 (Japanisch)" kann bei der Orientierung helfen. Wer die aktuelle Seitensprache nicht liest, sollte trotzdem seine eigene erkennen können.

Übersetze auch diese Zusatzbezeichnungen passend zur jeweiligen Seite. Ein deutsches Menü, das plötzlich "Japanese" erklärt, wirkt ein bisschen wie die letzte Folie, die vor dem Meeting niemand mehr kontrolliert hat. Die W3C-Empfehlungen zur Sprachnavigation erläutern diese Beschriftung.

4. Verwende eindeutige Sprachcodes

Intern braucht jede Fassung eine eindeutige Zuordnung. Für amerikanisches Englisch ist beispielsweise "en-US" üblich, für britisches Englisch "en-GB". Die sichtbare Beschriftung darf trotzdem "English (UK)" heißen. Anzeige und technischer Code erfüllen unterschiedliche Aufgaben.

Plane dabei auch die URLs: Jede Sprachfassung sollte eine eigene Adresse haben. hreflang kennzeichnet zusammengehörige Sprachversionen für Google. Ein Dropdown allein erledigt das noch nicht. Google Search Central erklärt die technische Zuordnung.

Beim Wechsel gehört die englische Produktseite zur deutschen Produktseite. Wer nach einem Klick auf "English" auf der Startseite landet, darf das Produkt erneut suchen. Vielleicht lernt man dabei ja das Sortiment besser kennen. Fehlt eine Übersetzung, sag das offen.

5. Gib langen Sprachlisten eine Suche

Bei vielen Sprachen hilft ein Suchfeld. Lass die Suche möglichst sowohl "Deutsch" als auch "German" finden. Niemand sollte erst herausfinden müssen, unter welchem Namen du seine Sprache abgeheftet hast.

Für zwei Sprachen wäre das Suchfeld allerdings eine ziemlich ambitionierte Beschäftigungsmaßnahme.

6. Platziere die Auswahl dort, wo man sie findet

Setze den Sprachselektor gut sichtbar in den Kopfbereich. Der Footer kann eine zusätzliche Möglichkeit bieten. Ausschließlich ganz unten bedeutet: erst durch eine Seite scrollen, die man nicht versteht. Gastfreundschaft mit Ausdauerprüfung.

Prüfe besonders die mobile Darstellung. Eine Auswahl, die auf dem großen Monitor sofort sichtbar ist, kann im Handy-Menü unter mehreren Ebenen verschwinden. Das W3C empfiehlt eine Platzierung nahe dem Seitenanfang.

7. Mach den Sprachselektor barrierefrei bedienbar

Nutze echte Links für die Sprachseiten und beschrifte die Navigation verständlich. Kennzeichne die aktuelle Auswahl auch für assistive Technik. Dafür eignet sich bei einem Link zur aktuellen Seite beispielsweise aria-current="page". Das W3C zeigt die passende Menüstruktur.

Lege bei der Abnahme die Maus beiseite: Erreichst du alle Optionen mit der Tastatur? Ist der Fokus sichtbar? Prüfe außerdem mit einem Screenreader, ob Name und Zustand der Bedienelemente verständlich sind. Ein grüner Haken im Designentwurf beantwortet diese Fragen leider nicht.

8. Merke dir die bewusste Sprachwahl

Speichere die gewählte Sprache für spätere Besuche. Eine ausdrückliche Auswahl sollte Vorrang vor einer Vermutung haben.

Du sitzt im Urlaub in Italien und möchtest weiterhin Deutsch lesen? Das sollte möglich bleiben. Google rät von automatischen Weiterleitungen anhand einer vermuteten Sprache ab. Lass andere Sprachfassungen erreichbar, auch über direkt aufgerufene Links. Siehe Googles Hinweise zum Sprachwechsel.

9. Unterscheide regionale Varianten

Wenn du unterschiedliche Fassungen anbietest, benenne sie eindeutig: etwa "Português (Brasil)" und "Português (Portugal)".

Ein Menü mit zweimal "Português" ist ein Ratespiel. Die Information, die zur Entscheidung nötig ist, gehört direkt an die Auswahl.

10. Teste mit Menschen, die den Weg nicht kennen

Öffne eine fremdsprachige Unterseite. Bitte eine Testperson, ihre Sprache zu wählen und denselben Inhalt weiterzulesen. Verrate vorher nicht, wo der Schalter sitzt.

Beobachte den Weg auch auf dem Handy. Sobald du erklärst, wie es geht, testest du deine Hilfestellung.

Du planst eine mehrsprachige Website? Bei dotnetic schauen wir mit dir auch auf die Übergänge zwischen den Sprachfassungen. Zum Beispiel darauf, ob nach dem Klick auf "English" noch das Produkt zu sehen ist, für das sich dein Besucher interessiert hat.