Language selector

Problem Context

• Users may arrive through search, shared links, bookmarks, redirects, browser language negotiation, account preferences, device locale, or location hints.
• The current page may have complete equivalent translations, partial translated sections, machine-translated content, unavailable translations, or language-specific legal and regional variants.
• Language selection affects comprehension, accessibility, search, support, authentication, forms, legal notices, communication preference, and trust.
• Users may not understand the current page language well enough to discover hidden settings or interpret language names translated into that current language.
• Language, country, region, script, locale, currency, timezone, and communication preference are related but distinct choices.

Selection Rules

• Choose language selector when users need to switch the current page, task, or product interface to another available language.
• Use settings management when language is one durable configuration value inside a broader account or app settings area.
• Use preference center when language controls future communications, consent records, profile data, or marketing topics rather than current content.
• Use adaptive defaults when browser, device, account, or previous behavior only suggests the starting language.
• Use region, country, currency, or timezone controls separately when the user is changing market, legal jurisdiction, money, or scheduling context rather than text language.
• Show a direct two-language switch only when there are exactly two equivalent choices and the alternate label is understandable.
• Use a menu, list, or searchable selector for three or more languages, script variants, regional variants, or long language names.
• Do not list a language as fully available unless the current page or task has an equivalent translation.
• Persist explicit language choice across same-site navigation and do not override it with Accept-Language or IP detection.
• Preserve current page, route, selected item, form draft, authentication state, and return path when switching to an equivalent language.

Required States

• Default detected-language state with visible current language and manual override.
• Two-language switch state for exactly two equivalent translations.
• Three-or-more-language menu or list state with native labels and current selection.
• Selected-language state that updates page language, content language, and selector label.
• Persisted explicit-choice state that survives internal navigation.
• Equivalent translation available, partial translation, unavailable translation, machine translation, and fallback language states.
• Script or region disambiguation state such as Portuguese from Brazil or Chinese simplified versus traditional.
• Task-preservation state for route, object, form draft, authentication, focus, and scroll.

Interaction Contract

• The selector names the current language and available alternatives in language labels users can recognize.
• Selecting a language changes language only, not country, currency, timezone, legal market, notification preference, theme, density, or saved view unless stated separately.
• Explicit user selection overrides browser, device, IP, or account inference until the user changes it or clears the saved choice.
• Equivalent translated pages preserve the current route, selected object, draft, session, scroll anchor, and return path wherever technically possible.
• Unavailable or partial translations are labelled before selection, not discovered after redirect.
• The page language and any language names written in another language are programmatically marked for assistive technology.
• Focus moves predictably from the selector to the changed content or remains on the selector with a status message.

Implementation Checklist

• Define language inventory by page or route, including complete, partial, unavailable, machine-translated, fallback, and regional/script variants.
• Store explicit language choice separately from inferred Accept-Language, IP location, country, currency, timezone, and communication preference.
• Use language tags, html lang, Content-Language where appropriate, and lang attributes on language names written in their own language.
• Map equivalent routes before showing a language as available, and provide fallback explanations when no equivalent route exists.
• Preserve form drafts, selected records, authentication, focus, scroll, and query state through language changes.
• Test screen readers, keyboard use, high zoom, long labels, right-to-left scripts, script variants, borrowed devices, private browsing, and no-cookie sessions.

Common Generated-UI Mistakes

• Using country flags as the only language labels.
• Relying only on automatic language negotiation with no visible manual override.
• Redirecting language switches to a homepage and losing current context.
• Listing languages that do not have equivalent content for the current page.
• Mixing language selection with country, currency, timezone, notification, or consent preferences.
• Writing all language names in the current language so users in the wrong language cannot find their own.
• Failing to update lang metadata after changing page or component language.

Critique Questions

• Can users who do not understand the current page language still recognize and use the selector?
• Which languages are equivalent for this exact page or task, and which are partial, missing, fallback, or machine-translated?
• Does selecting a language preserve route, object, form draft, session, focus, and scroll?
• Does explicit choice override Accept-Language, IP, device locale, and account inference consistently?
• Are language, locale, region, script, currency, timezone, and communication preference kept distinct?
• Are page language and language-name changes exposed through correct lang attributes?