Language Switcher Widget
Add a language switcher that links visitors to the versions of your site you have already written in other languages. Choose an accessible dropdown, a row of links or a small floating button, with each language named in its own words - English, Español, Deutsch - rather than a flag.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="language-switcher"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Each line names a language code (a BCP 47 tag such as es or pt-BR), the label visitors should see and the address of that version. The current language is taken from the option you set or from your page's html lang attribute - an exact tag first, then the same language in another region - and its link carries aria-current. Every link has hreflang and lang attributes, so assistive technology pronounces 'Français' in French and search engines see the relationship. The dropdown follows the WAI-ARIA menu button pattern: Enter, Space or Down Arrow open the menu on the first language and Up Arrow on the last; arrows, Home, End and typing a first letter move between languages; Escape closes it and returns focus to the button; Tab closes it and moves on. The floating layout puts the same button in a bottom corner.
Method
- Line format: code | label | URL; code must match a BCP 47 shape such as en, es-MX or zh-Hant-TW; repeated codes keep the first; at most 40
- URLs: https, http or a same-site path starting with '/'; anything else drops the line
- Current language: your option, else html lang; exact match, then same primary language (es-MX -> es)
- Each link: hreflang = code, lang = code; the current one aria-current="true"
- Dropdown keys: Enter/Space/Down -> first item, Up -> last, Up/Down wrap, Home/End, first letter, Escape closes and returns focus, Tab closes
Worked examples
A visitor on the Mexican Spanish page
Inputs: html lang es-MX; lines en, es, fr, de
Result: Button reads 'Español'; its link in the menu is marked as current
There is no es-MX line, so the same primary language (es) is chosen.
Hostile lines dropped
Inputs: 'fr | Français | javascript:alert(1)' and 'english | Bad | https://e.com/'
Result: Neither appears
javascript: is not an accepted scheme, and 'english' is not a language code.
Floating code button
Inputs: layout floating, current language de
Result: A small 'DE' button with a globe icon bottom-left, named 'Language: Deutsch (DE)'
The accessible name contains the visible code and says what the button is for.
Limitations
- Each link goes to the address you give; it does not map the current page to its translated twin unless you place a switcher with page-specific links.
- The current language is only detected when your html lang attribute (or the option) is set correctly.
Where publishers use it
- A hotel website with English, Español and Deutsch versions, using the dropdown in the header
- A Canadian business switching between English and Français with two inline links
- A documentation site with a floating language button bottom-left on every page
- A Swiss shop offering de-CH, fr-CH and it-CH, where the code display shows DE, FR and IT
Questions
Why are there no flags?
Flags represent countries, not languages. Spanish is spoken in more than twenty countries, Switzerland has four national languages, and choosing one country's flag for a language excludes or offends the others. Each language is shown by its own name, which every speaker recognises.
Does it translate my pages automatically?
No. It links to versions you have written or had translated. Machine translation on the fly would send your content to a translation service and show visitors text you have never checked.
Does it add hreflang tags for Google?
The links carry hreflang attributes, but Google's documented methods are link elements in the page head, HTTP headers or your sitemap. Add those in your CMS as well; the switcher helps people choose, the head tags help search engines.
Is the dropdown accessible by keyboard and screen reader?
Yes. It is a real button with aria-haspopup and aria-expanded, opening a menu of links with the menu and menuitem roles, and follows the arrow-key, Home, End and Escape behaviour of the WAI-ARIA Authoring Practices menu button pattern.
Sources
- Menu Button Pattern - W3C WAI-ARIA Authoring Practices Guide
- Tell Google about localized versions of your page - Google Search Central
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Language Switcher https://a2z.tools/embed/language-switcher
<a href="https://a2z.tools/embed/language-switcher">A2Z Tools Language Switcher</a>
[A2Z Tools Language Switcher](https://a2z.tools/embed/language-switcher)
Language Switcher by A2Z Tools - https://a2z.tools/embed/language-switcher
Related widgets
-
A neat footer row of links to your privacy policy, terms, cookie policy and sitemap, in your own fonts.
-
A footer line like © 2018–2026 Riverside Cafe that moves to the new year on its own every January.
-
A Listen button that reads your article aloud with the browser's built-in voices - no audio files, no account.
-
"Updated 3 October 2026" from your page's real modified date - meta tags or JSON-LD - never the load time.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
