Skip to main content

Language Selector

The language selector pattern allows users to choose their preferred language for viewing content, making your site accessible to multilingual audiences.


Overview

The language selector pattern provides a consistent and accessible way for users to switch between available language versions of your content. This pattern is essential for government websites that serve diverse populations and may be legally required to provide content in multiple languages.

A well-implemented language selector helps users quickly identify and access content in their preferred language, improving the overall user experience for non-English speakers and ensuring equitable access to information and services.


Header Language Selector

Place the language selector in the header for site-wide language switching. This variant uses a dropdown menu that displays available languages.

Component Preview


Component Code

<div class="usa-language-container">
  <ul class="usa-language__primary usa-accordion">
    <li class="usa-language__primary-item">
      <button type="button" class="usa-accordion__button usa-language__link" aria-expanded="false" aria-controls="language-options">
        <span class="usa-language__link-text">Languages</span>
      </button>
      <ul id="language-options" class="usa-language__submenu">
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="en" lang="en">English</a>
        </li>
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="es" lang="es">Espanol</a>
        </li>
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="zh" lang="zh">Chinese (Simplified)</a>
        </li>
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="vi" lang="vi">Tieng Viet</a>
        </li>
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="ko" lang="ko">Korean</a>
        </li>
        <li class="usa-language__submenu-item">
          <a href="#" hreflang="tl" lang="tl">Tagalog</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

In-page Language Selector

Use the in-page language selector when you want to provide language options within the content area, such as at the top of a specific page or section.

Component Preview


Component Code

<div class="usa-language-container">
  <ul class="usa-language__primary-links">
    <li class="usa-language__primary-item">
      <a href="#" class="usa-language__link" hreflang="en" lang="en">
        <span class="usa-language__link-text">English</span>
      </a>
    </li>
    <li class="usa-language__primary-item">
      <a href="#" class="usa-language__link" hreflang="es" lang="es">
        <span class="usa-language__link-text">Espanol</span>
      </a>
    </li>
    <li class="usa-language__primary-item">
      <a href="#" class="usa-language__link" hreflang="zh" lang="zh">
        <span class="usa-language__link-text">Chinese</span>
      </a>
    </li>
  </ul>
</div>

Footer Language Selector

Place language options in the footer as a secondary location for users who scroll to the bottom of the page seeking additional navigation options.

Component Preview

This page is available in other languages:


Component Code

<div class="usa-language-container">
  <div class="usa-footer__secondary-section">
    <div class="grid-row grid-gap">
      <div class="grid-col-12">
        <p class="margin-bottom-1"><strong>This page is available in other languages:</strong></p>
        <ul class="usa-list usa-list--unstyled display-flex flex-wrap">
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="en" lang="en">English</a>
          </li>
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="es" lang="es">Espanol</a>
          </li>
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="zh" lang="zh">Chinese (Simplified)</a>
          </li>
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="vi" lang="vi">Tieng Viet</a>
          </li>
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="ko" lang="ko">Korean</a>
          </li>
          <li class="margin-right-2">
            <a href="#" class="usa-link" hreflang="tl" lang="tl">Tagalog</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


Guidance

When to use the language selector pattern

When your site offers content in multiple languages.
If your website provides translated versions of content, users need a clear way to switch between them.
When legally required to provide multilingual content.
Executive Order 13166 requires federal agencies to provide meaningful access to programs and activities for people with limited English proficiency (LEP).
When serving a diverse population.
Government services often serve communities with significant non-English speaking populations who need access to information in their preferred language.

Best practices

Display language names in their native language.
Write "Espanol" instead of "Spanish" and "Tieng Viet" instead of "Vietnamese" so users can recognize their language regardless of the current page language.
Keep language selector placement consistent.
Place the language selector in the same location across all pages. The header is the most common and expected location.
Avoid using flags to represent languages.
Flags represent countries, not languages. Many languages are spoken in multiple countries, and many countries have multiple official languages.
Link to equivalent translated content.
Each language link should take users to the same page content in their selected language, not to a generic translated homepage.
Indicate when translated content is unavailable.
If a page is not available in a particular language, clearly communicate this and provide alternative options.

Accessibility considerations

Use proper lang attributes.
Add the lang attribute to language links so screen readers can announce them correctly. For example, lang="es" for Spanish.
Use the hreflang attribute on links.
The hreflang attribute tells browsers and search engines what language the linked page is in.
Ensure keyboard accessibility.
Users must be able to navigate to and activate the language selector using only a keyboard.
Provide visible focus indicators.
Make sure focus states are clearly visible when users tab through language options.
Set the document language.
Ensure the <html> element has the correct lang attribute for the page content language.

USWDS Documentation

For more guidance, view the USWDS Language Selector Pattern Documentation.

Looking for U.S. government information and services?
Visit USA.gov