govuk-design-system-backlog icon indicating copy to clipboard operation
govuk-design-system-backlog copied to clipboard

Published 20 hours ago • verified publisher icon alphagov

Supporting multiple languages

Open govuk-design-system opened this issue 7 years ago • 17 comments

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

govuk-design-system avatar Jan 15 '18 09:01 govuk-design-system

@stevenaproctor commented on 1 Aug

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

image

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".

image

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.

mikeash82 avatar Nov 27 '18 11:11 mikeash82

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

kr8n3r avatar Feb 11 '19 11:02 kr8n3r

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

torydunn-hmrc avatar Jun 26 '19 11:06 torydunn-hmrc

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

zuzak avatar Jul 04 '19 14:07 zuzak

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

vickytnz avatar Oct 09 '19 15:10 vickytnz

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?

terrysimpson99 avatar Dec 06 '19 13:12 terrysimpson99

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

36degrees avatar Feb 10 '20 16:02 36degrees

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/

nschonni avatar Feb 11 '20 03:02 nschonni

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.

abbott567 avatar Dec 11 '20 14:12 abbott567

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.

Turi-CO avatar Mar 05 '21 10:03 Turi-CO

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).

terrysimpson99 avatar May 04 '21 10:05 terrysimpson99

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

image

leekowalkowski-hmrc avatar Nov 05 '21 09:11 leekowalkowski-hmrc

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.

Screenshot 2022-06-07 at 13 02 37 Screenshot 2022-06-07 at 13 02 45

We tested this with users and had great feedback.

aislingbrock avatar Jun 07 '22 12:06 aislingbrock

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:

image

A list appearing in the content of the page:

image

A list appearing below/next to the page title:

image

A list appearing in the page's header:

image

A toggle appearing in the page's phase banner:

image

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

image

A list appearing in the page's footer:

image

And a toggle appearing in the page's footer:

image

querkmachine avatar Jun 27 '22 10:06 querkmachine

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:

These informed an initial proposal which was shared with the community in August 2022: https://github.com/alphagov/govuk-frontend/discussions/2740

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

Potential work for future consideration:

claireashworth avatar Feb 08 '23 13:02 claireashworth

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:

CharlotteDowns avatar Jun 05 '23 10:06 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.

CharlotteDowns avatar Oct 16 '23 08:10 CharlotteDowns