Language selector

A language selector is the control on a website that lets a visitor change the language the site is shown in. It is also called a language switcher or language picker, and it is usually a dropdown in the header or a list of links in the footer. Whatever its shape, it does one job, which is to take the reader to the same content in another language.

What a selector links to#

Each entry in a good selector links to the page the visitor is on, in the other language, not to the other language's homepage. Someone reading a returns policy in English who picks Italiano should land on the Italian returns policy. A selector that always goes home makes the reader find their place again.

The entries are ordinary links. Because each language version has its own address, a selector built from links works without JavaScript, can be shared and bookmarked, and gives search engines a path to every version. Google's hreflang documentation even names language selector pages as what its x-default value was designed for, a page whose only job is to let the visitor choose.

How to label the entries#

Label each language in that language: Deutsch, Italiano, Türkçe. A reader scanning the list for their own language is looking for its name as they write it. The W3C's guidance on WCAG's Language of Parts uses this case as its example: a list of language links, each name written in its language and each link carrying a lang attribute, so a screen reader pronounces Deutsch as German and 繁體中文 as Chinese.

Flags are a weaker label, because a flag stands for a country and many languages are spoken in several. Language switcher best practices covers flags, placement, dropdowns against lists and forced redirects in detail.

LangRelay's selector#

LangRelay's WordPress plugin renders its selector on the server, as a list of links, from your Site's live languages. You place it with a block, an Elementor widget or a shortcode, and if you place none, a floating one appears in the bottom right corner once your first language is live. Each link points at the same page in the other language, uses the translated address when you have set one, and carries its own lang and hreflang. Native names and flags are each a setting.

The language switcher feature page shows the options, the x-default entry covers the fallback page a selector can serve as, and translating an Elementor site walks through placing the widget.