Translating aria-labels for localization efforts

Developer Support CMS Development
1

Hey all - does anyone know of the best way to translate/localize hard-coded aria labels for accessibility purposes? We have a few areas where aria labels are included in the HubL with hard-coded English values in some instances.
I guess we could use the default HubL variables related to language (ex. content.language) to customize the text based on the page’s language, but I can imagine that getting out of hand quickly if we start to localize to many different languages. Curious if there’s a preferred method. Thanks!

2

Hey @AMarsden4,

I think the easiest solution for this would be to create locale files. An example of it can be found in the @hubspot/cmsdefaultpages folder inside the Design-Manager.

It’s basically handling content with JSON files.
The folder-structure should be:

- _locales
- - LANGTAG-1
- - - messages.json
- - LANGTAG-2
- - - messages.json
...

So if I’d like to create a translation for German and English my folder-structure would be

- _locales
- - de
- - - messages.json
- - en
- - - messages.json

if I’d like to add a specific translation to something like UK English it would be

- _locales
- - de
- - - messages.json
- - en
- - - messages.json
- - en_gb
- - - messages.json

The messages.json files are simple JSONs.

An example:

en/messages.json:

{
"button_aria_label": {
		"message": "Click this button to get the free whitepaper",
		"description": "",
		"placeholders": null
	}
}

en_gb/messages.json:

{
"button_aria_label": {
		"message": "Kindly click this button to obtain the complimentary whitepaper.",
		"description": "",
		"placeholders": null
	}
}

de/messages.json:

{
"button_aria_label": {
		"message": "Klicken Sie auf diese Schaltfläche, um das kostenlose Whitepaper herunterzuladen.",
		"description": "",
		"placeholders": null
	}
}

Once done, open your template(s) and import the folder like this:

{% set template_translations = load_translations("./_locales", html_lang, "en") %}

“./_locales” is the path to the _locales folder, “en” sets the default language

Replace your hard coded arias with following tag:

{{ template_translations.button_aria_label }}

done

best,

Anton