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.
<header>
<header class="govuk-header dwp-header" data-module="govuk-header">
<div class="">
<div class="govuk-header__link--service-name dwp-header__container--service-name service-name-default">
Apply for a benefit
</div>
</div>
</header>
</header>
<main>
<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>
</main>
<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 %}
<header>
{{ dwpHeader({
name: "Apply for a benefit"
}) }}
</header>
<main>
<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>
</main>
<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.
<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:
- joining the discussion on GitHub
- using the hashtagdesign-system channel on Slack
- emailing the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk
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