Language toggle: Canada.ca design system

Mandatory

All public-facing Government of Canada content is available in both official languages. A language toggle in the global header provides access to the corresponding page in the other official language.

When to use

The language toggle is mandatory on all pages.

New transactional pages for web applications must allow people to toggle between official languages. Legacy web applications that don’t support toggling should be updated or replaced. Until then, you can omit the language toggle if its use results in a loss of data.

What to avoid

Don’t put other language options in the language toggle. It is only for English and French. Links to content in other languages should appear in the content area of the page.

Don’t use the language toggle to point to anything other than the corresponding page in the equivalent language.

Content and design

Find content and design specifications and visual examples.

Content specifications

Ensure that the language toggle links to the corresponding page in the alternate language.

Large screens

• On English pages, the link label text is “Français”
• On French pages, the link label text is “English”

Small screens

For small screens, the language toggle uses a 2-letter abbreviation for each language:

• On English pages, the link label text is “FR” in uppercase
• On French pages, the link label text is “EN” in uppercase

Accessibility

• Add the full name of the language in the title attribute for the abbreviated language toggle
  • the abbreviation title for EN is “English”
  • the abbreviation title for FR is “Français”

Interactions

• When selected, the language toggle brings the user to the alternate language version of the page they were on

Design specifications

• Type: link
• Position: top-right corner
• Font: Lato
• Size: 1.2 em
• Text colour:
  • default link: #284162
  • selected link (on hover or focus): #0535d2
  • visited link: #284162

Accessibility

• Label the language toggle code so that it’s spoken in the correct language if read aloud by assistive technologies
• Ensure that the text label for the language toggle won’t be translated by browser translation tools

Visual examples

Image description: language toggle (English page) - large screen

Standard header of an English Canada.ca page with a highlight of the linked word Français in the top-right corner

Image description: language toggle (French page) - large screen

Standard header of a French Canada.ca page with a highlight of the linked word English in the top-right corner

Image description: language toggle - small screen

Standard header of an English Canada.ca page with a highlight of the linked abbreviation FR in the top-right corner

Image description: Language toggle (French page) - small screen

Standard header of a French Canada.ca page with a highlight of the linked abbreviation EN in the top-right corner

How to implement

Find working examples for implementing the language toggle.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure each element of the header.

• GCWeb (WET) header documentation

Implementations

Determine what best suits the type of page you're creating.