Sprachumschalter in WordPress: nutzerfreundlich, barrierefrei und SEO-sicher

Ein guter Sprachumschalter in WordPress steht auf jeder Seite an derselben Stelle, meist oben rechts, nennt die Sprachen in ihrer eigenen Bezeichnung (Deutsch, Español, Türkçe) und führt nach der Auswahl nicht zur Startseite, sondern zum Gegenstück der aktuellen Seite. Flaggen sind höchstens ein zusätzliches Erkennungszeichen neben dem Sprachnamen, und das Menü muss mit Tastatur und Screenreader funktionieren. Dieser Beitrag behandelt die Position, die Frage Flagge oder Sprachname, die Risiken automatischer Weiterleitungen, Regeln zur Barrierefreiheit und die richtige Einrichtung in WordPress – mit dem Sprachumschalter dieser Website als Beispiel.

Wohin gehört der Sprachumschalter?

Die meisten Nutzer suchen den Sprachumschalter oben rechts neben der Hauptnavigation. Wenn es keinen guten Grund gibt, mit dieser Gewohnheit zu brechen, platzieren Sie ihn dort und halten ihn auf jeder Seite an derselben Stelle. Eine zweite Sprachliste im Footer hilft Besuchern, die bis ans Seitenende scrollen. Mobil sollte der Umschalter entweder als kleiner Button in der oberen Leiste erscheinen oder als deutlicher Abschnitt im geöffneten Menü; ein winziger Link ganz unten im Menü wird leicht übersehen.

Flaggen oder Sprachnamen?

Flaggen stehen für Länder, Sprachen für Menschen. Ist Englisch Großbritannien oder die USA, Spanisch Spanien oder Mexiko, Arabisch welches Land? Ein Umschalter nur aus Flaggen lädt zu Missverständnissen ein und stößt manche Besucher vor den Kopf. Schreiben Sie deshalb immer den Sprachnamen, und zwar in der Sprache selbst: Wer Spanisch spricht, erkennt „Español“ schneller als „Spanisch“. Ganz verzichten müssen Sie auf Flaggen nicht; neben dem Namen beschleunigen sie das Erfassen. Wichtig ist, für jede Sprache eine Flagge festzulegen und sie überall gleich zu verwenden.

Manchmal fallen Land und Sprache tatsächlich auseinander. Bei Software, die weltweit in einer einzigen Währung verkauft wird, zählt die Sprache mehr als das Land. Unsere Anzeigetafel-Software Multi Score Screen für Sportanlagen nennt ihre Tarife zum Beispiel in US-Dollar; auf so einer Produktseite genügt eine Sprachauswahl. Ändern sich Preise, Versand oder Rechtstexte je Land, sollten Sprache und Land als getrennte Menüs angeboten werden.

Warum Flaggen-Emojis Probleme machen

Flaggen-Emojis wie 🇩🇪 erscheinen auf manchen Systemen als zwei Buchstaben statt als Flagge; gängige Browser unter Windows zeichnen keine Flaggen-Emojis. Deshalb zeichnet diese Website ihre Flaggen als kleine Inline-SVGs: keine Anfrage an externe Dateien oder Dienste, überall dasselbe Aussehen, für Screenreader ausgeblendet – und der Sprachname steht immer daneben.

Wohin soll die Auswahl führen?

Besucher nach dem Sprachwechsel auf die Startseite zu schicken, ist der häufigste Fehler. Wer auf der Leistungsseite auf Englisch wechselt, möchte die englische Leistungsseite sehen. Jeder Sprachlink sollte auf das Gegenstück der aktuellen Seite zeigen. Fehlt eine Übersetzung, weisen Sie darauf hin, führen zur nächstliegenden Seite, etwa der Blogübersicht in dieser Sprache, und geben für unübersetzte Seiten kein hreflang aus. Die technischen Details stehen in unserer hreflang-Anleitung.

Automatische Weiterleitung: mit Vorsicht

Besucher automatisch nach Browsersprache oder IP-Adresse weiterzuleiten, ist verlockend, birgt aber zwei Risiken. Erstens das Nutzererlebnis: Eine Spanierin, die in Deutschland lebt, möchte nicht zwangsweise auf der deutschen Version landen. Zweitens Suchmaschinen: Google rät davon ab, Nutzer anhand ihrer vermuteten Sprache automatisch umzuleiten, und empfiehlt stattdessen Links zu allen Sprachversionen, denn Crawler müssen jede Version sehen können. Sicher ist folgendes Muster: Die Browsersprache beim ersten Besuch als Vorschlag nutzen, die Wahl in einem Cookie speichern und den Umschalter immer erreichbar halten. Auch die Weiterleitung nach Browsersprache in AYM Multilingual merkt sich die Wahl des Besuchers.

Barrierefreiheit: ein Menü für alle

• Zugänglicher Name: Der Sprach-Button sollte verständlich angesagt werden, etwa „Sprache: Deutsch“.
• Statusinformation: Bei einem Dropdown meldet der Button, ob das Menü geöffnet oder geschlossen ist.
• Tastaturbedienung: Öffnen mit Enter oder Leertaste, Bewegen mit Pfeiltasten, Schließen mit Esc.
• Sprachattribute: Jeder Link nennt seine Zielsprache, damit Screenreader den Namen richtig aussprechen.
• Sichtbarer Fokus: Wer per Tastatur navigiert, muss den fokussierten Eintrag klar erkennen.
• Dekorative Flaggen: Flaggen für Screenreader ausblenden; die Information trägt der Sprachname.

Eine einfache Struktur nach diesen Grundsätzen sieht so aus:

<div class="lang">
  <button type="button" aria-expanded="false" aria-controls="lang-menu"
          aria-label="Language: Deutsch">
    <svg aria-hidden="true" viewBox="0 0 5 3">…</svg> DE
  </button>
  <ul id="lang-menu" hidden>
    <li><a href="/tr/hizmetler" hreflang="tr" lang="tr">Türkçe</a></li>
    <li><a href="/services" hreflang="en" lang="en">English</a></li>
    <li><a href="/de/dienstleistungen" hreflang="de" lang="de" aria-current="true">Deutsch</a></li>
  </ul>
</div>

Ab wie vielen Sprachen ein Dropdown?

Bei zwei oder drei Sprachen ist eine Linkleiste am schnellsten: ein Klick zum Wechsel. Ab vier Sprachen wirkt ein Dropdown aufgeräumter. Markieren Sie die aktive Sprache, halten Sie die Reihenfolge fest (alphabetisch oder nach Marktpriorität) und sorgen Sie dafür, dass die Einträge mobil bequem mit dem Finger getroffen werden.

Typische Fehler aus der Praxis

In Audits mehrsprachiger Websites begegnen uns immer wieder dieselben Muster: Der Umschalter fehlt auf Unterseiten oder im Checkout, Sprachnamen stehen in der aktuellen statt in der eigenen Sprache, ein Klick auf die eigene Sprache lädt die Seite unnötig neu, oder das Dropdown schließt sich, bevor man es mit der Maus erreicht. Häufig ist auch, dass Links zu nicht übersetzten Seiten ins Leere oder auf eine 404-Seite führen. Testen Sie Ihren Umschalter deshalb auf mehreren Seitentypen, mit Maus, Touch und Tastatur, bevor Sie eine neue Sprache freischalten.

Den Sprachumschalter in WordPress einrichten

Die meisten Mehrsprachigkeits-Plugins bieten den Umschalter als Menüeintrag, Widget, Block oder Shortcode an. Unser eigenes AYM Multilingual ordnet Menüs, Header und Footer je Sprache zu und leitet nach Browsersprache weiter, wobei es sich die Wahl des Besuchers merkt. Fügen Sie zum ersten Mal eine Sprache hinzu, planen Sie URL-Struktur und Übersetzungsprozess vor dem Umschalter; Schritt für Schritt erklärt das unsere Anleitung WordPress-Sprache hinzufügen. Ein Umschalter ist nur so gut wie die Inhalte dahinter – lesen Sie dazu auch den Beitrag über Lokalisierung und Übersetzung.

Checkliste

1. Steht der Umschalter auf jeder Seite an derselben Stelle und ist er mobil leicht zu finden?
2. Werden Sprachen in ihrer eigenen Bezeichnung genannt, Flaggen nur als Zusatz?
3. Führt jeder Link zum Gegenstück der aktuellen Seite?
4. Wirkt eine automatische Weiterleitung nur als Vorschlag, und wird die Wahl gespeichert?
5. Ist das Menü mit Tastatur und Screenreader bedienbar?

Wenn Sie Ihre mehrsprachige Website samt Umschalter professionell einrichten lassen möchten, finden Sie alles zu unserem Angebot für mehrsprachiges WordPress.

Teilen:XLinkedInWhatsApp