Patterns: Select a language

Preferred language

Help a user to choose the languages they prefer for communication.

This pattern allows users to indicate the languages they prefer to use for either written or spoken communications.

About this pattern

What problem does this solve?

Approximately 8 percent of the total U.S. population over the age of five is considered Limited English Proficient (LEP). They may speak English, but speak it less than “very well,” and they may not read it well, either. Limited English proficiency can lead to misunderstandings and frustration. Individuals may miss important deadlines or may submit the wrong material. In some circumstances, the miscommunication can be critical—but it is always alienating.

When to use this pattern

Use this pattern when collecting information on the preferred written or spoken language of a user, in order to provide documentation in their preferred language, consultation with a speaker of their preferred language, or translation/interpretation services.

What’s the solution?

The pattern allows users to select their language preferences for both written and spoken communication and to indicate their preferred language if it is not in the list.

Guidance

What to do

• Do list the languages in their native spelling
• Capitalize the name of each language (for example, English, Español).
• Do include American Sign Language (ASL) in spoken preferences if you are committed to supporting in-person communications, such as in a health care setting.
• Do order the languages alphabetically by the common, native language name. For example:
  العربية (Arabic)
  简体字 (Chinese - Simplified)
  English
  Español (Spanish)
  Français (French)
  Italiano (Italian)
  Pусский (Russian)
• Provide an “other” selection that allows the user to specify the specific language, if you are committed to supporting their language needs, such as in a health care setting.
• Do allow the user to select more than one language.
• Do consider providing an option for an individual to indicate “I need help completing this form,” if your program can support providing assistance. Some people with limited English-language skills or low literacy may not be able to complete the form themselves.

What not to do

• Do not include languages other than those you can support.
• Do not use icons or graphics, since they may mean different things in different languages and cultures.
• Do not use flags or country codes to indicate languages. Flags do not map to languages; Arabic, for example, is spoken in many countries. It may not be universally understood that ES indicates Spanish.
• Do not assume that the language a user prefers to speak is the same language they prefer to read.

Preferred language - Spoken

I prefer to speak the following language or languages:

Select all that apply

American Sign Language (ASL)

العربية - Arabic

简体字 - Chinese (Simplified)

English

Español - Spanish

Français - French

Pусский - Russian

Other languages

For example, Tagalog or Portuguese

Preferred language - Written

I prefer to receive written communication in:

Select all that apply

العربية - Arabic

简体字 - Chinese (Simplified)

English

Español - Spanish

Français - French

Pусский - Russian

Other languages

For example, Tagalog or Portuguese

<h4 class="site-preview-heading">Preferred language - Spoken</h4>
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset" aria-multiselectable="true">
    <legend class="usa-legend">I prefer to speak the following language or languages:</legend>
    <div class="usa-hint">Select all that apply</div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="american-sign-language" type="checkbox" name="american-sign-language"
        value="arabic" />
      <label class="usa-checkbox__label" for="american-sign-language">American Sign Language (ASL)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="arabic-spoken" type="checkbox"
        name="arabic-spoken" value="arabic-spoken" />
      <label class="usa-checkbox__label" for="arabic-spoken">العربية - Arabic</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="chinese-spoken" type="checkbox" name="chinese-spoken"
        value="chinese-spoken" />
      <label class="usa-checkbox__label" for="chinese-spoken">简体字 - Chinese (Simplified)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="english-spoken" type="checkbox" name="english-spoken"
        value="english-spoken" />
      <label class="usa-checkbox__label" for="english-spoken">English</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="spanish-spoken" type="checkbox" name="spanish-spoken"
        value="spanish-spoken" />
      <label class="usa-checkbox__label" for="spanish-spoken">Español - Spanish</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="french-spoken" type="checkbox"
        name="french-spoken" value="french" />
      <label class="usa-checkbox__label" for="french-spoken">Français - French</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="russian-spoken" type="checkbox" name="russian-spoken"
        value="russian-spoken" />
      <label class="usa-checkbox__label" for="russian-spoken">Pусский - Russian</label>
    </div>
    <label class="usa-label" for="other-languages-spoken">Other languages</label>
    <div class="usa-hint" id="spHint">For example, Tagalog or Portuguese</div>
    <input class="usa-input usa-input--xl" id="other-languages-spoken" name="other-languages" aria-describedby="spHint" >
  </fieldset>
  </form>
  <h4 class="site-preview-heading">Preferred language - Written</h4>
  <form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset" aria-multiselectable="true">
    <legend class="usa-legend">I prefer to receive written communication in:</legend>
    <div class="usa-hint">Select all that apply</div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="arabic-written" type="checkbox" name="arabic-written" value="arabic-written" />
      <label class="usa-checkbox__label" for="arabic-written">العربية - Arabic</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="chinese-written" type="checkbox" name="chinese" value="chinese-written" />
      <label class="usa-checkbox__label" for="chinese-written">简体字 - Chinese (Simplified)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="english-written" type="checkbox" name="english" value="english-written" />
      <label class="usa-checkbox__label" for="english-written">English</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="spanish-written" type="checkbox" name="spanish" value="spanish-written" />
      <label class="usa-checkbox__label" for="spanish-written">Español - Spanish</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="french-written" type="checkbox" name="french" value="french-written" />
      <label class="usa-checkbox__label" for="french-written">Français - French</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="russian-written" type="checkbox" name="russian" value="russian-written" />
      <label class="usa-checkbox__label" for="russian-written">Pусский - Russian</label>
    </div>
    <label class="usa-label" for="other-languages-written">Other languages</label>
    <div class="usa-hint" id="wrHint">For example, Tagalog or Portuguese</div>
    <input class="usa-input usa-input--xl" id="other-languages-written" name="other-languages" aria-describedby="wrHint" >
  </fieldset>
</form>

<h4 class="site-preview-heading">Preferred language - Spoken</h4>
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset" aria-multiselectable="true">
    <legend class="usa-legend">I prefer to speak the following language or languages:</legend>
    <div class="usa-hint">Select all that apply</div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="american-sign-language" type="checkbox" name="american-sign-language"
        value="arabic" />
      <label class="usa-checkbox__label" for="american-sign-language">American Sign Language (ASL)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="arabic-spoken" type="checkbox"
        name="arabic-spoken" value="arabic-spoken" />
      <label class="usa-checkbox__label" for="arabic-spoken">العربية - Arabic</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="chinese-spoken" type="checkbox" name="chinese-spoken"
        value="chinese-spoken" />
      <label class="usa-checkbox__label" for="chinese-spoken">简体字 - Chinese (Simplified)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="english-spoken" type="checkbox" name="english-spoken"
        value="english-spoken" />
      <label class="usa-checkbox__label" for="english-spoken">English</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="spanish-spoken" type="checkbox" name="spanish-spoken"
        value="spanish-spoken" />
      <label class="usa-checkbox__label" for="spanish-spoken">Español - Spanish</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="french-spoken" type="checkbox"
        name="french-spoken" value="french" />
      <label class="usa-checkbox__label" for="french-spoken">Français - French</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="russian-spoken" type="checkbox" name="russian-spoken"
        value="russian-spoken" />
      <label class="usa-checkbox__label" for="russian-spoken">Pусский - Russian</label>
    </div>
    <label class="usa-label" for="other-languages-spoken">Other languages</label>
    <div class="usa-hint" id="spHint">For example, Tagalog or Portuguese</div>
    <input class="usa-input usa-input--xl" id="other-languages-spoken" name="other-languages" aria-describedby="spHint" >
  </fieldset>
  </form>
  <h4 class="site-preview-heading">Preferred language - Written</h4>
  <form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset" aria-multiselectable="true">
    <legend class="usa-legend">I prefer to receive written communication in:</legend>
    <div class="usa-hint">Select all that apply</div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="arabic-written" type="checkbox" name="arabic-written" value="arabic-written" />
      <label class="usa-checkbox__label" for="arabic-written">العربية - Arabic</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="chinese-written" type="checkbox" name="chinese" value="chinese-written" />
      <label class="usa-checkbox__label" for="chinese-written">简体字 - Chinese (Simplified)</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="english-written" type="checkbox" name="english" value="english-written" />
      <label class="usa-checkbox__label" for="english-written">English</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="spanish-written" type="checkbox" name="spanish" value="spanish-written" />
      <label class="usa-checkbox__label" for="spanish-written">Español - Spanish</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="french-written" type="checkbox" name="french" value="french-written" />
      <label class="usa-checkbox__label" for="french-written">Français - French</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="russian-written" type="checkbox" name="russian" value="russian-written" />
      <label class="usa-checkbox__label" for="russian-written">Pусский - Russian</label>
    </div>
    <label class="usa-label" for="other-languages-written">Other languages</label>
    <div class="usa-hint" id="wrHint">For example, Tagalog or Portuguese</div>
    <input class="usa-input usa-input--xl" id="other-languages-written" name="other-languages" aria-describedby="wrHint" >
  </fieldset>
</form>

Considerations

• Strongly consider providing language to reassure the user that there are no penalties associated with accessing information or completing forms in languages other than English. Some people with limited English-language skills have concerns about stigma or that use of a language other than English will impact their immigration status, program eligibility, or future opportunities.
• Once a user has saved a preference setting other than English, default to their preferred language for future mail or email communications whenever possible.
• Consider that individuals may have other challenges in addition to limited English proficiency, and may require other types of support.
• Translation and navigation functions in languages other than English should still meet appropriate accessibility standards to ensure equal access.

Accessibility

• Use the HTML lang attributes to set the language of the page (<html lang='en'>, for example). See H57: Using the language attribute on the HTML element for more information.

Related components, patterns, and templates

• Checkbox component
• Text input component
• Contact preferences pattern
• Find selected multilingual content pattern
• Select from three or more languages pattern
• Select from two languages pattern

References

• Improving access to services for persons with limited English proficiency, executive order 13166. (August 11, 2000) Retrieved on July 25, 2022, from https://www.govinfo.gov/content/pkg/FR-2000-08-16/pdf/00-20938.pdf
• CMS Appendix A - top 15 non-English languages by states. (n.d.) Retrieved on July 25, 2022, from https://www.cms.gov/CCIIO/Resources/Regulations-and-Guidance/Downloads/Appendix-A-Top-15-non-english-by-state-MM-508_update12-20-16.pdf
• CMS’s guide to developing a language access plan. (n.d.) Retrieved on July 25, 2022, from https://www.cms.gov/About-CMS/Agency-Information/OMH/Downloads/Language-Access-Plan-508.pdf
• Improving access to public websites and digital services for limited English proficient (LEP) persons. (December 2021) Retrieved on July 25, 2022, from https://www.lep.gov/sites/lep/files/media/document/2021-12/2021_12_07_Website_Language_Access_Guide_508.pdf
• LEP.gov. (n.d.) Retrieved on July 25, 2022, from https://www.lep.gov/
• The limited English proficient population in the United States in 2013. (July 8, 2015) Retrieved on July 25, 2022, from https://www.migrationpolicy.org/article/limited-english-proficient-population-united-states-2013
• OMB memorandum m-17-06, 16. (November 2016) Retrieved on July 25, 2022, from https://www.whitehouse.gov/wp-content/uploads/legacy_drupal_files/omb/memoranda/2017/m-17-06.pdf#page=16

Disclaimer

Links to nongovernment sources are made for educational or source citation purposes only, and do not represent an endorsement of the organizations by the General Services Administration. The General Services Administration does not assume any responsibility for the content, operation, or policies of other entities’ websites.

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2022-11-14	3.3.0	Guidance	No	Pattern published.