To add a button that immediately translates your entire website back and forth between two languages, follow this concise plan and implementation options. Choose the approach that fits your site’s tech stack, privacy needs, translation quality requirements, and maintenance preferences.

Summary of approaches

• Client-side machine translation (quick, minimal backend work): use a browser-based translation library or a translation widget that calls a cloud translation API from the client.

• Server-side translation (better control, SEO and accessibility friendly): serve translated pages or text from your server or render translations at build time.

• Hybrid / pretranslated content (best quality, full control): maintain separate language content (CMS translations or static files) and switch on the client.

UX considerations

• Provide a single toggle button or two-language selector labeled clearly (e.g., “EN / ES” or language names).

• Preserve current page state (same URL or map to language-specific URL).

• Announce language change for screen readers using aria-live or change page lang attribute.

• Ensure keyboard accessibility and visible focus states.

• If using machine translation, warn users about possible inaccuracies.

Implementation options

1. Simple client-side translation using a cloud API (instant toggle, minimal server work)

• How it works: On button click, gather visible text nodes, send to translation API, replace text with translated results. Toggle back by storing original text.

• Pros: Fast to implement, instant toggle without page reload.

• Cons: Privacy concerns (sends page text to API), not SEO-friendly, may break complex UI or dynamic content.

Example (vanilla JS outline)

• On page load, traverse DOM and build an array of text nodes and their original text.

• Add a button that toggles state.

• On translate: batch text into API requests, replace text nodes with returned translations.

• On revert: restore original text from stored values.

Key implementation notes

• Exclude script, style, input value placeholders, and aria labels unless intended.

• Batch requests to respect API rate limits.

• Update document.documentElement.lang attribute and meta lang-related elements.

• Use aria-live region to announce language change for assistive tech.

• Cache translations in localStorage to avoid repeated API calls.

2. Server-side or static pre-rendered translations (recommended for production, SEO, and quality)

• How it works: Maintain two sets of content (e.g., /en/... and /es/...), or render translations at build time using a static site generator or CMS. Button triggers a navigation to the corresponding language URL, preserving path.

• Pros: SEO-friendly, can use professional translations, no client-side API exposure, better accessibility and performance.

• Cons: Requires content management in two languages and deployment for updates.

Implementation outline

• Structure URLs with language prefix or subdomain (example.com/en/..., example.com/es/...).

• Keep content synced in CMS or translation files (JSON/YAML).

• Button click maps current path to equivalent path in other language and navigates there.

• If a page is missing in the target language, show a fallback or translated stub.

3. Hybrid: pretranslated UI + dynamic translation for dynamic content

• Pretranslate static UI strings via resource files (i18n bundles) and switch them client-side.

• For user-generated or CMS content, navigate to server-rendered translated pages or request translations as needed.

Libraries and tools to consider

• i18n frameworks for static/SPA apps: i18next, react-intl, Vue i18n, Angular i18n.

• Static site translation: gettext, Hugo/Next.js/i18n routing, or manage language-specific content in your CMS.

• For machine translation APIs: choose based on privacy and cost; authenticate from server side where possible.

• Accessibility helpers: set lang attribute, use aria-live to announce changes.

Practical code example — Toggle that navigates between language-prefixed URLs

• Assumes site uses /en/... and /es/... URL structure.

HTML EN / ES

JavaScript const toggleBtn = document.getElementById('lang-toggle'); function toggleLanguage() { const path = window.location.pathname; // Assume first segment is language code const segments = path.split('/'); if (!segments[1]) return; const current = segments[1]; const target = current === 'en' ? 'es' : 'en'; segments[1] = target; const newPath = segments.join('/') || '/'; // Set lang attribute on document document.documentElement.lang = target; // Navigate to equivalent path window.location.href = newPath + window.location.search + window.location.hash; } toggleBtn.addEventListener('click', toggleLanguage);

Accessibility improvements

• Add role and aria-pressed state