Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Skip to main content

Help users to Toggle to Welsh

This pattern lets the user change the language used in a service from English to Welsh and from Welsh to English. It uses the Language toggle component.

Open this welsh toggle pattern example in a new tab

Beta This is a new service – your feedback will help us to improve it. 

<header class="govuk-header" role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
  <a href="#" class="govuk-header__link govuk-header__link--homepage">
    <svg
      focusable="false"
      role="img"
      class="govuk-header__logotype"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 148 30"
      height="30"
      width="148"
      aria-label="GOV.UK">
      <title>GOV.UK</title>
      <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
    </svg>
  </a>
</div>
</div>
</header>
<div class="govuk-width-container">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
  <strong class="govuk-tag govuk-phase-banner__content__tag">
    Beta
  </strong>
  <span class="govuk-phase-banner__text">
    This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
  </span>
</p>
</div>
</div>
<main class="govuk-width-container">
<nav class="dwp-language-toggle" aria-label="Language toggle">
<ul class="dwp-language-toggle__list">
  <li class="dwp-language-toggle__list-item" aria-current="true">
    English
  </li>
  <li class="dwp-language-toggle__list-item">
    <a href="/patterns/toggle-to-welsh/examples/cy"
      hreflang="cy"
      lang="cy"
      rel="alternate"
      class="govuk-link"
      aria-label="Newid yr iaith ir Gymraeg">Cymraeg</a>
  </li>
</ul>
</nav>
</main>
{% from "govuk/components/header/macro.njk" import govukHeader %}
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}

{% from "language-toggle/macro.njk" import dwpLanguageToggle %}

{{
    govukHeader({
        homepageUrl: "#",
        useTudorCrown: true
    })
}}

<div class="govuk-width-container">
{{ 
    govukPhaseBanner({
        tag: {
            text: "Beta"
        },
        html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
    })
}}
</div>

<main class="govuk-width-container">
{{
    dwpLanguageToggle({
        selectedLang: "en",
        href: {
            en: "/patterns/toggle-to-welsh/examples/en",
            cy: "/patterns/toggle-to-welsh/examples/cy"
        }
    })
}}
</main>

When to use this pattern

Use the Welsh language toggle when a service is available in Welsh and the user can switch from English to Welsh while using it.

When not to use this pattern

Services used mainly by DWP staff do not usually have a Welsh language version and so will not need this pattern.

How it works

This pattern uses the Language toggle component to switch a page’s language from English to Welsh and back.

You should put the toggle on the right-hand side of the page, below the GOV.UK header and phase banner.

The Welsh language toggle should appear on every page of the service.

When a user selects a language the page should change to the language selected. The user should be shown this language for the rest of the journey unless they decide to change to the other language option.

When a user selects a language they should stay on the same page of the service. They should not be taken back to the beginning of the service. Any information they have already entered should be kept.

Alternatives to the Toggle to Welsh pattern

You should implement the Welsh language toggle if possible. Research by the Universal Credit service found that “even if fluent, many people want the ability to easily switch between Welsh and English versions of a page so they can be confident they’ve understood it - especially where it includes technical or legal terms.”

However, some services instead provide a parallel Welsh-language version of the whole service, with a language choice at the start but no ability to change languages without restarting the whole service. This example shows a link on the Start page.

Open this welsh language option pattern example in a new tab

Apply for a benefit

Find out if you can apply for a benefit

This service is also available in Welsh (Cymraeg).

Start 
<div class="govuk-width-container">
<main class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-l">Apply for a benefit</h1>
    <p class="govuk-body">Find out if you can apply for a benefit</p>
    <p class="govuk-body">This service is also available <a class="govuk-link" href="#">in Welsh</a> (<a href="#" lang="cy">Cymraeg</a>).</p>
    <a href="#" role="button" draggable="false" class="govuk-button govuk-!-margin-top-2 govuk-!-margin-bottom-8 govuk-button--start" data-module="govuk-button">
      Start
      <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
      </svg>
    </a>
  </div>
</div>
</main>
</div>
{% from "govuk/components/button/macro.njk" import govukButton %}

<div class="govuk-width-container">

<main class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-l">Apply for a benefit</h1>

    <p class="govuk-body">Find out if you can apply for a benefit</p>

    <p class="govuk-body">This service is also available <a class="govuk-link" href="#">in Welsh</a> (<a href="#" lang="cy">Cymraeg</a>).</p>

    <a href="#" role="button" draggable="false" class="govuk-button govuk-!-margin-top-2 govuk-!-margin-bottom-8 govuk-button--start" data-module="govuk-button">
      Start
      <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
      </svg>
    </a>
  </div>
</div>
</main>
</div>

Some services include a footer link to a Welsh-language version. If you do this it should not be the only way to access the Welsh language version: research from Universal Credit and HMRC found that people don’t find the footer link easily, don’t expect to see it among policy and legal links, and notice when it is inconsistent across services.

Accessibility

To meet WCAG 2.2 success criteria 3.1.1 Language of page and 3.1.2 Language of parts services should make sure the language attribute has been applied properly. This helps things like screen readers to pronounce the content correctly.

In the English version of the service:

  • the page’s default language must be set to English with <html lang=en>
  • the link text ‘Cymraeg’ must be set to Welsh with lang=cy

In the Welsh version of the service:

  • the page’s default language must be set to Welsh with <html lang=cy>
  • the link text ‘English’ must be set to English with lang=en

The inactive toggle text (‘English’ on the English version of the site, ‘Cymraeg’ on the Welsh version) does not need a separate language attribute because it is in the default language of the page.

For more about building accessible services see the DWP Accessibility Manual.

Research

Research on an English/Welsh language toggle from HMRC and from the Universal Credit service found that users liked to be able to toggle between Welsh and English throughout a service to sense check their understanding, especially for unfamiliar words. This was true even for fluent Welsh speakers.

Research from HMRC also found that people could not easily find a footer link to the Welsh language option.

Contribute

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

Discuss Toggle to Welsh on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk

Back to top