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