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.

When to use this pattern

Use the Welsh language toggle when a service is available in Welsh.

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

You should put the toggle to Welsh on the right-hand side, 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.

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">
    English
  </li>
  <li lang="cy" class="dwp-language-toggle__list-item">
    <span class="govuk-visually-hidden">Newid yr iaith ir Gymraeg</span>
    <a href="?lang=cy" class="govuk-link">Cymraeg</a>
  </li>
</ul>
</nav>
{% from "govuk/components/header/macro.njk" import govukHeader %}
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}

{{
    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">
<nav class="dwp-language-toggle" aria-label="Language toggle">
<ul class="dwp-language-toggle__list">
        <li class="dwp-language-toggle__list-item">
            English
        </li>
        <li lang="cy" class="dwp-language-toggle__list-item">
            <span class="govuk-visually-hidden">Newid yr iaith ir Gymraeg</span>
            <a href="?lang=cy" class="govuk-link">Cymraeg</a>
        </li>
</ul>
</nav>

If your service is not able to use the toggle to Welsh pattern

If you’re unable to use the toggle to Welsh pattern on your service you should include a signpost to the Welsh language option on the start page of the service.

Do not place the Welsh language option in the footer of the page.

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>

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.

Research

More research is needed on this pattern.

You can help to improve this pattern by:

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