Supporting multiple languages

[govuk-design-system]

What

• how to make your service work in multiple languages
• the law regarding multiple language support
• how to let users switch the language of your service

Why

Welsh language support is a legal requirement for many government services, so we should provide design guidance for this.

Anything else

• Language switcher: Land Registry Elements
• Multiple language support discussion Dropbox Paper
• GOV.UK Publishing 'Translation navigation' component

[mikeash82]

@stevenaproctor commented on 1 Aug

This will help Welsh language users when content is not available in Welsh.

In English, this means "This page is only available in English at the moment." The link lets you close the banner and means "Do not show this again".

In English, this means "Some of our pages have yet to be translated into Welsh." This more general version is used in the personal tax account as a disclaimer for the whole account.

This information will need to be used in all services that are not completely translated in to Welsh. The blue banner is an alert that is not part of the GOV.UK Design System or HMRC Design System yet.

Research on this pattern

The content has been agreed with and translated by the Welsh Language Unit.

The blue banner is in older versions of assets frontend as an attorney banner and an alert-info notification.

I do not have any research but the banner is usually above the h1 and is often missed or ignored.

[kr8n3r]

Useful resource for javascript components https://www.i18next.com/

[torydunn-hmrc]

@timpaul are there any updates on progress for language support? Asking on behalf of our Welsh Language Unit. Thanks

[zuzak]

Here's some research from 2015: https://userresearch.blog.gov.uk/2015/09/15/the-welsh-experience-on-gov-uk-a-qualitative-research-study/

[vickytnz]

HMRC has a consistent toggle for English and Cymraeg https://design.tax.service.gov.uk/hmrc-design-patterns/account-header/

[terrysimpson99]

The guidance for components contains examples in english. It would be great if examples were also in welsh.

For instance, somebody recently asked on Slack what the welsh for the skip link was. Answers came back as ''Mynd i'r prif gynnwys' and 'Neidio i'r prif gynnwys'. The HMRC welsh translation team told me to use 'Ewch yn syth i’r prif gynnwys'. A lot of skip links are in english even when the toggle is set to welsh. My hypothesis is that compliance would increase if a welsh example is given. It would also reduce duplicated effort.

I propose the welsh translation team is asked to provide examples for components. What do others think?

[36degrees]

I propose the welsh translation team is asked to provide examples for components. What do others think?

It's something that we're hoping to explore in the next 12 months, but we need to work out how to implement it consistently and in a sustainable way. For example, we need to understand how:

• we would present the Welsh examples as part of the existing guidance
• it would impact our ability for our team and for other contributors to add new components, make changes to guidance, etc going forward
• we deal with support questions that relate to the Welsh translations

[nschonni]

Canada is reworking the design system too https://github.com/canada-ca/design-system-systeme-conception/tree/gh-pages
Next iteration may be moving into more Web Components, but we've had a bunch of experience with the multilingual docs with https://github.com/wet-boew/wet-boew/

[abbott567]

I know we've not had much traction on this pattern, but one of the things I'm seeing come up quite a lot is a fail for 3.1.2 Language of parts due to not having a common component and the lack of understanding around it.

The issue is that people put a link in which reads: Cymraeg, but they're not giving it the attribute lang="cy". Because Cymraeg is literally written in another language, it needs to be tagged as such or a screenreader may pronounce it incorrectly.

It would be good, if this pattern is not going to be developed for a while, to at least add some guidance around it to the design system as a stop-gap so people at least know that they need to add the lang attribute in order for it to meet WCAG 2.1.

[Turi-CO]

To add another voice to the mix, the 'Check an HGV' service is translated into 8 languages (walked back from the original 17 requested) because we need to reach a variety of users both in and out of the UK. The link off of the start page is difficult to see in the midst of all the other information, so having a vetted component/pattern that can accommodate changing to multiple languages throughout the service would be brilliant, and probably useful to a variety of services across government.

[terrysimpson99]

The 'Check an HGV...' service is a good example showing more than two languages. Language selection is at top-right, as is the style for British embassies (such as https://www.gov.uk/world/organisations/british-embassy-moscow). There is some evidence supporting top-right at: https://confluence.tools.tax.service.gov.uk/display/WL/User+Testing+in+Welsh (the confluence page may not be visible to everyone).

[leekowalkowski-hmrc]

We're being asked to consider supporting 16 other languages in our service, like here: https://www.gov.uk/guidance/transporting-goods-between-great-britain-and-the-eu-by-roro-freight-guidance-for-hauliers

[aislingbrock]

We have one service translated into 11 languages, with another (much larger one) currently in the process. We looked at the patterns shown above for guidance, but this didn't seem ideal for our project which is largely used on a mobile device. Instead we display the languages on the start screen in a list.

For our larger service, we have a select box in the top right corner with the languages. If JS is disabled, this becomes the standard English/Welsh toggle. We also have the list of linked languages on the start screen below the main body content to help with discoverability if the user does not spot or understand the convention of the select input, or if they do not have JS enabled.

We tested this with users and had great feedback.

[querkmachine]

In my recent internationalisation work I've ended up compiling quite the list of language selector patterns used across services and GOV.UK.

Some list all available languages, some exclude the currently selected language (usually if this is a toggle between two languages). Sometimes the current language is still presented as a link, sometimes it isn't. Sometimes the language name is presented in English as well as the target language, sometimes it isn't.

The GOV.UK translation navigation component seems to be the most used pattern on GOV.UK itself, and many services crib elements of it's design, layout and on-page location for their own implementations too.

---

A toggle appearing in the content of the page:

---

A list appearing in the content of the page:

---

A list appearing below/next to the page title:

---

A list appearing in the page's header:

---

A toggle appearing in the page's phase banner:

---

A list appearing below the page's phase banner, aligned with the back link.

---

A list appearing in the page's footer:

---

And a toggle appearing in the page's footer:

[claireashworth]

Summary of the Internationalisation/localisation work

To help support multiple languages, the team carried out some work looking at how Internationalisation (I18n) worked in GOV.UK Frontend. The following are the high level decisions and actions. We’ve also included links to the related issues so you can read the conversations that informed the decision making process.

The goal was to allow users to customise/change all hardcoded strings in our components, including those added in JavaScript, to allow for text in other languages.

The team has:

• investigated using an internationalisation library, allowing services to provide us with the relevant translated string they wanted to use and adding internationalisation logic to lookup translation from a key
• completed research with service teams
• researched a data attribute approach for passing translations to component JavaScript
• decided on a JavaScript and Nunjucks API for passing translation strings
• identified and resolved missing Nunjucks translations
• translated hardcoded strings into JavaScript
• created documentation

Two important pieces of work in shaping the feature were Beeps’ spikes:

• For the text in JavaScript [DO NOT MERGE] Internationalisation support govuk-frontend#2614
• For the texts in Nunjucks [WIP][DO NOT MERGE] Nunjucks internationalisation support govuk-frontend#2648

These informed an initial proposal which was shared with the community in August 2022: alphagov/govuk-frontend#2740

For more detail you can read the Issues related to the internationalisation/localisation work:

• Add ability to override or remove Crown Copyright in Footer #1290
  Apr 2019
• Add ability to override or remove OGL logo in Footer #1291
  Apr 2019
• Accordion 'open/close all sections' cannot be customised or translated #1325
  May 2019
• Character Count 'count message' cannot be customised or translated #1681
  Dec 2019
• Header navigation text cannot be customised or translated #1682
  Dec 2019
• Research internationalisation libraries and how other libraries and design systems do internationalisation #1709
  Jan 2020
• Spike approaches to internationalisation #1714
  Jan 2020
• Write and share a proposal for internationalisation #1715
  Jan 2020
• Make 'menu' text in header customisable #1904
  Aug 2020
• Allow Character count hint text to be internationalised #1929
  Aug 2020
• Allow users to override hardcoded strings in our component JavaScript (internationalisation) #1708 (epic)
  Jan 2022
• Investigate how our proposed internationalisation approach works for service teams #2566
  Mar 2022
• Add thousands comma-seperation in character count messages #2568
  Mar 2022
• Add ability to customise character count text that announces character/word limit / no-js fallback #2687
  Jul 2022
• Add examples and tests for translating error message and summary list content #2690
  Jul 2022
• Add full page example(s) for translated components (via macro options) in the review app #2692
  Jul 2022
• Add ability to pass translation strings to accordion component via data-attributes #2699
  Jul 2022
• Expand internationalisation logic to add string interpolation feature #2700
  Jul 2022
• Add ability to pass translation strings into character count component via data-attributes #2701
  Jul 2022
• Research a data-attribute approach to passing translations to component JavaScript #2736
  Jul 2022
• Add parameter to localise mobile menu toggle button #2720
  Aug 2022
• Decide JavaScript and Nunjucks API for passing translation strings #2780
  Aug 2022
• Decide prioritisation order for methods of passing in translation strings #2781
  Aug 2022
• Add internationalisation logic to lookup translation from key #2801
  Aug 2022
• Add ability to pass translation strings into accordion component via JS #2802
  Aug 2022
• Expand internationalisation logic to add pluralisation #2804
  Aug 2022
• Add ability to pass translation strings into character count component via JS #2805
  Aug 2022
• Respond to Rollup warning for i18n.mjs #2829
  Sep 2022
• Consider making the I18n class private #2927
  Oct 2022
• Move from default to named export for I18n #2899
  Oct 2022

Potential work for future consideration:

• Summary list: Allow customisation of full action link content #2649
  Issue opened May 2022
• Error message: Remove hardcoded content order #2650
  Issue opened May 2022
• Consider alternative names for the I18n class #2926
  Issue opened Oct 2022
• Make the I18n class public #2977
  Issue opened Nov 2022

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of when a user is asked whether they want to change a language. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

One WCAG AAA issue raised

The link text is 'In Welsh (Cymraeg)’, which is pretty meaningless on its own out of context

The link provided for users to change the language of the page to Welsh, has been included within a paragraph to provide that context. However, for users navigating the page out of context using the link text alone, the links purpose is not made entirely clear, as the link text is only presented to the user as ‘In Welsh (Cymraeg)’.

More detail in this issue:

• #2796

[CharlotteDowns]

We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users switch languages within your service.