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

Do not use the Welsh language toggle when a service has no Welsh language option.

How it works

You should put the toggle to Welsh on the right-hand side below the:

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 (opens in a new window) will help us to improve it.

<header class="govuk-header dwp-header" data-module="govuk-header">
<div class="">
<div class="govuk-header__link--service-name dwp-header__container--service-name">
    Apply for a benefit
</div>
</div>
</header>
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
    alpha
</strong>
<span class="govuk-phase-banner__text">
    This is a new service – your <a class="govuk-link" href="#">feedback (opens in a new window)</a> will help us to improve it.
</span>
</p>
</div>
<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 "internal-service-header/macro.njk" import dwpHeader %}

{{ dwpHeader({
name: "Apply for a benefit"
}) }}

<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
alpha
</strong>
<span class="govuk-phase-banner__text">
This is a new service – your <a class="govuk-link" href="#">feedback (opens in a new window)</a> will help us to improve it.
</span>
</p>
</div>
<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 requirements

To meet WCAG 2.1 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 on this pattern

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