Language switcher design.
The language switcher is the interface component that lets the user see which language version of the site they are on and move to another version.
A small component, but one of the most used on a multilingual site, and when designed wrong it loses the user outright. A user who cannot find the language they want leaves the site — they do not try another path.
A good language switcher has three jobs: show which language you are in, show which languages are available, and when a choice is made, take you to the SAME PAGE’s counterpart in that language.
The third job is the most skipped
On most sites switching the language throws the user to the home page. The user is reading a services page, switches language, and finds themselves on the home page — forced to find the page they wanted all over again.
The correct behaviour is going to the current page’s counterpart in the target language. If there is no counterpart — the page does not yet exist in that language — the user must be told so and offered an alternative; not silently dumped on the home page.
On this site the language links point on every page to that page’s counterparts, and the links are generated from the same source as the hreflang set. The link in the interface and the declaration in the machine layer therefore cannot drift apart.
Do not use flags
A common and harmful pattern: showing languages with flags. A flag represents a country, not a language — and the two almost never coincide.
Which flag is German? Germany, Austria and Switzerland all speak German. Which flag is English? Dozens of countries. And the reverse: a country can have more than one official language.
The correct display is the language’s own name, written in its own language. A German user cannot read the word “Almanca” but recognizes the word “Deutsch”. On this site the three languages are listed under their own names.
A flag represents a country, not a language — and the two almost never coincide.
Accessibility
The language switcher carries a few accessibility requirements, and all are cheap.
- Every link should carry the target language’s label — the screen reader must be able to say where that link goes.
- The link text should be in the target language and that language declared — otherwise the reader mispronounces it.
- The current language should be marked — which one you are in must be as clear programmatically as visually.
- The touch target should be sufficient — two-letter abbreviations naturally produce small targets.
- It should be keyboard-reachable — a dropdown switcher must follow the key conventions.
The fourth item was handled on this site by measurement: the two-letter language labels were turned into 44-pixel targets with padding, and the verification suite measures that separately at the mobile breakpoint.
Placement and visibility
Where the language switcher stands is also a decision, and there are two common placements. Standing in the header is the most common: the user sees it as soon as they enter the page and can fix the language immediately if it is wrong.
Standing in the footer is less intrusive but less findable. A user landing on a page in the wrong language usually leaves the site rather than scrolling to the footer.
The practical balance: in the header, but measured. It need not be a large component — on a trilingual site three short labels are enough. On large many-language sites a dropdown switcher becomes unavoidable, and then it must follow the keyboard conventions.
- In the header, visible on every page — the safest placement.
- The current language marked — both visually and programmatically.
- Language names in their own languages — “Deutsch”, “Türkçe”, “English”.
- No flags — a flag represents a country, not a language.
- It takes you to the same page — dumping to the home page is the most frequent error.
- Touch target ≥44px — two-letter labels are naturally small.
The fifth item is the most decisive for the user experience and the most labour-demanding technically: every page’s counterpart in every language must be known. That knowledge already exists in the hreflang set — generating the interface links from the same source also prevents the two from drifting apart.
On this site it is exactly so: the language links and the hreflang declarations come out of the same route map. If a page does not exist in a language, that language appears neither in the link nor in the set.
The page with no counterpart
The hardest scenario is the user’s current page having no counterpart in the target language. What should the language switcher do then? There are three behaviours and two are bad.
The first bad one: showing the link anyway and taking the user to a 404. The second bad one: silently dumping to the home page — the user does not understand what happened and loses their place.
The correct behaviour is either not showing that language among the options at all, or showing it and saying what will happen. On this site the first path is applied: if a page does not exist in a language, that language does not appear in that page’s switcher — and it is not in the hreflang set either. The two behaviours come from the same source.
The decision yields a plain result: every link visible in the switcher works. The user never clicks a dead language link and never lands on an unexpected page.
The alternative — showing the link and saying “this page does not exist in that language, would you like to go to the home page” — is more informative but requires an interface layer. On small sites the first path is sufficient and plainer.
A final measurement note: whether the language switcher is actually used can be measured. If it is never clicked, either nobody is looking for another language or the switcher cannot be found — and the two demand very different responses. Without measurement, which one it is cannot be known.
A final pattern warning: hiding the language switcher in a dropdown menu adds a needless click on a trilingual site. Three short labels can stand side by side and provide the switch in a single click.
A dropdown menu becomes necessary only when the language count passes five — and then it must follow the keyboard conventions, manage focus correctly and close with Escape.