Welsh language toggle

[jennifer-hodgson]

Welsh language toggle

Overview

This is used to switch the language used on a service from English to Welsh.

This pattern is related to the HMRC header.

[wilsond-gds]

hello – I'm auditing a service that uses the Welsh language toggle and I’m wondering if there’s an issue related to WCAG SC 2.4.4 Link purpose in context.

I can see there’s an <nav class="language-select" aria-label="Choose a language"> around the list, but if I’m tabbing through the page’s links using a screenreader, or showing the links as a list, the unselected link is announced (in this case Cymraeg) without any context.

Could adding some invisible text to the link (e.g. 'change language to Welsh/Cymraeg') help orientate users in this situation?

[adamliptrot-oc]

@wilsond-gds if it is following the pattern (https://design.tax.service.gov.uk/hmrc-design-patterns/welsh-language-toggle/) then the link will include the hidden copy "Change language to" (in the same language) to make it clear the link's purpose.

I suspect the service you are looking at may be using an older version of the component, so it would be worth their updating.

[jfranciswebdesign]

Hello - we are looking at a language toggle on our services at Companies House. Curious as to why your guide says it should appear above the Back link (not in line with it)? Thanks.

[adamliptrot-oc]

@jfranciswebdesign From memory it was so focus order followed the visual order. The back link sits below the toggle in the source order, so the natural focus order is toggle then back link. If we placed them both inline then the focus would jump from the right of the page to the left (in reverse of expected order).

It has been looked at before as it does add to wasted space. Putting them inline was done in some services but the focus order effect was odd so was backed out, not to say it couldn't be revisited).

There is also the consideration of what page hierarchy is in play - the toggle is more of a global navigation element (so sits closer to the header in source order - and some variants of the header have it as part of that UI), whilst the back link is more page-level. There was some wider discussion about moving the toggle into the global header region by default, but this never materialised.

[jfranciswebdesign]

Thanks for the speedy reply @adamliptrot-oc - all makes sense, we'll go with your design 👍

[RobertBuczek]

Hello everyone,

We've been exploring ways to enhance the Welsh language toggle to make it more accessible to non-technical colleagues. Our idea is to streamline the process by using a single HTML template that incorporates a language flag, indicating which part of the code should be generated in the final HTML from the Nunjucks template, as illustrated below:

Example:

{% if lang == 'en' %}
    <p>This prototype is maintained by x, y, z.</p>
{% else %}
    <p>Mae'r prototeip hwn yn cael ei gynnal gan x, y, z.</p>
{% endif %}

Our primary goal is simplicity, avoiding the need for separate journeys or HTML files based on language preferences, or utilizing JSON files for translation. We experimented with an i18n translation server, but found it required JSON files for each language, such as translation.en or translation.cy, which didn't allow for easy separation across multiple iterations.

We welcome any suggestions or insights on how to refine our current approach. Whether it pertains to user experience, technical implementation, or any other aspect, we're eager to hear your ideas! Please don't hesitate to share your suggestions here.

FYI: @alrobboOC

[joelanman]

can you say a bit more on this issue? As it may be solveable

which didn't allow for easy separation across multiple iterations

[alrobboOC]

We found that with the current toggle, the current challenges apply:

The current toggle points to a url. So if I was viewing it it English and clicked the Welsh, it means redirecting to a totally new and separate (Welsh) page. A duplicate of the english page. This would mean I would need a journey in English and a 2nd journey in Welsh. What if I was inputting values in the English journey, and switched to the Welsh. Would those values be remembered? What if I wanted to iterate the h1 on the english page? It means I would need to go to the Welsh version and amend that two. So that's iterating on two pages. How would routing be impacted by switching between two journeys? So although the toggle works, thinking about it practically, it would be difficult to use on a prototype where we would be testing with Welsh users.

@RobertBuczek and I came up with a different way of making the toggle work, with the help of @JoeSimmonds. It makes the toggle more user friendly. It essentially means that all the information is on the same page, and the unselected language is hidden. That means there is just the one flow, and the challenges set out above, aren't an issue.

Instructions on how to implement the toggle into your prototype

1. Install the HMRC Frontend into your prototype

2. In your code editor, go to the page where you want the toggle

In the example below, I want the toggle to display on the page called toggle.html

See Screenshot 1

3. In this file, copy and paste the following code before the {% block content %}:

{% block beforeContent %}
    {{
        hmrcLanguageSelect({
            language: 'cy' if data['languagePreference'] === 'cy' else 'en',
            en: { href: '?languagePreference=en' },
            cy: { href: '?languagePreference=cy' }
        })
    }}
{% endblock %}

See screenshot 2

4. To enable users to switch between English and Welsh, wrap the content you want to toggle in an if statement. Place the English text inside the first set of

   tags and the Welsh text inside the second set. Copy and paste this code snippet into the area of your code where you want the content to switch between languages.

{% if data['languagePreference'] == "en" %}

               <div>
                       <p>English content to go here.</p>
               </div>

           {% else %}

               <div>
                       <p>Welsh content to go here.</p>
               </div>

           {% endif %}

See screenshot 3

5. Repeat this process wherever you want the content to switch between languages.

The caveat with this is that it's only for the prototype - I know this solution isn't ideal for live versions of the service so please be aware of that. It's not a perfect solution, but it's simple, it works and it's a start.

At the time of writing, there are plans to change the navigation bar, including the location of Welsh language toggle. Once the update is live, I'd love to discuss it more here to explore solutions.

@Jon-Rowe-HMRC fyi

[geoff-bell]

Might not be entirely appropriate here, but I tried to use the Welsh toggle to switch between two versions of content on my prototype, as it's controlled by HMRC-frontend, I wasn't able to do it as easily I thought, so I utilised some CSS to be able to switch easily enough between the two versions.

This is just for prototypes to be able to show 2 different versions of content to users, or developers and hasn't been checked for accessibility, etc. You might also encounter some issues if you try to display any inputs between the two versions as we hide input

Firstly, you'll need to add your own css as below:

input {
display:none; }
label {
float:left; display:block; color: #0b0c0c; padding: 0 10px 0 0; font-family: "GDS Transport", arial, sans-serif; -webkit-font-smoothing: antialiased;display: inline; }
.tab {
display:none; clear:both; }
#tab1:checked ~.tab1, #tab2:checked ~.tab2, #tab3:checked ~.tab3 {
display:block;
}
.button1, .button2 {
color: #1d70b8;
text-decoration: underline;
}
#tab1:checked ~ .button1 {
    color: #0b0c0c;
}
#tab2:checked ~ .button2 {
    color: #0b0c0c;
}

Next you can use the following HTML to display the 2 different versions of your content.

<div>
<input type="radio" name="tabs" id="tab1" checked>
<input type="radio" name="tabs" id="tab2">
<label for="tab1" class="button1">Phase one</label>
<label for="tab1" class="button1">|</label>
<label for="tab2" class="button2">Phase two</label>
<div class="tab tab1">
YOUR FIRST BIT OF CONTENT GOES HERE
</div>
<div class="tab tab12">
YOUR SECOND BIT OF CONTENT GOES HERE
</div>
</div>

You can find a working example in our prototype here.

[alrobboOC]

This is an interesting use of the toggle Geoff.

[alrobboOC]

regarding the comment I made above

I've had a blog post published explaining the reasoning behind the work we did on the toggle