Forum Discussion
Change HTML source language in Rise course
Dear community,
We developed an e-learning in Dutch using Articulate Rise and have gotten it tested on accessibility. One of the comments on the course was that in the HTML of the course the source language is shown as English ("html lang=en"), even though the full course is in Dutch. This results in screen readers selecting the language as English instead of Dutch which causes issues in, for example, wrong pronunciation of words. To overcome this users will have to manually select a different language on their screen readers.
I am wondering whether there is some kind of way to fix this and change the source language? Anyone experience with this?
Many thanks for your help!
24 Replies
MarcinZarod thanks for the script. This is a bit experimental, but I've modified it to include adding RTL direction on the body tag (on html tag doesn't work) for Arabic and other rtl languages. Only tested on a regular scorm output.
<script> (function () { try { const preferredLanguage = "ar"; // example // List of ISO language codes that use RTL direction const rtlLangs = ["ar", "he", "fa", "ur", "ps", "dv", "ku", "syr", "ug", "yi"]; const langCode = preferredLanguage.split("-")[0].toLowerCase(); function applyLangAndDir() { if (document && document.documentElement) { document.documentElement.lang = preferredLanguage; } if (document && document.body) { if (rtlLangs.includes(langCode)) { document.body.setAttribute("dir", "rtl"); } else { document.body.setAttribute("dir", "ltr"); } } } // Apply immediately applyLangAndDir(); // Monkey-patch __fetchCourse so Rise receives the preferred language var origFetch = window.__fetchCourse; if (typeof origFetch === 'function') { window.__fetchCourse = async function () { var data = await origFetch(); try { if (data) { if (data.labelSet && typeof data.labelSet === 'object') { data.labelSet.iso639Code = preferredLanguage; } if (data.course && typeof data.course === 'object') { data.course.locale = preferredLanguage; if (data.course.defaultLocaleId == null || data.course.defaultLocaleId === 'en') { data.course.defaultLocaleId = preferredLanguage; } } } } catch (e) { // ignore } // Re-apply after Rise loads its course data applyLangAndDir(); return data; } } // Backup: watch for body changes and re-apply dir const observer = new MutationObserver(() => applyLangAndDir()); observer.observe(document.body, { attributes: true, childList: true, subtree: false }); } catch (e) { // ignore } })(); </script>I seemed to have solved the problem with overriding the language setting in the WEB export from RISE. In the index.html file add this script just before the closing </head>
Change "pl-PL" to your language designation.<!begining of added script> <script> (function () { try { const preferredLanguage = "pl-PL"; // 1) Set <html lang> ASAP (prevents flashes of the wrong lang) if (document && document.documentElement) { document.documentElement.lang = preferredLanguage; } // 2) Make sure the URL always carries ?locale=pl-PL so Rise picks Polish // (the app's locale resolver reads from location.search). (function ensureLocaleParam() { try { const url = new URL(window.location.href); const current = url.searchParams.get("locale"); if (current !== preferredLanguage) { url.searchParams.set("locale", preferredLanguage); // Use replaceState to avoid adding history entries. window.history.replaceState(null, "", url.toString()); } // Also patch pushState/replaceState so future navigations keep pl-PL const wrap = (fn) => function () { const ret = fn.apply(this, arguments); try { const u = new URL(window.location.href); if (u.searchParams.get("locale") !== preferredLanguage) { u.searchParams.set("locale", preferredLanguage); window.history.replaceState(null, "", u.toString()); } } catch (_) {} return ret; }; window.history.pushState = wrap(window.history.pushState); window.history.replaceState = wrap(window.history.replaceState); } catch (_) {} })(); // 3) Patch the course boot JSON so defaults are Polish if app falls back var origFetch = window.__fetchCourse; if (typeof origFetch === "function") { window.__fetchCourse = async function () { let data = await origFetch(); try { if (data) { // l10n/default locale if (data.l10n && typeof data.l10n === "object") { data.l10n.defaultLocale = preferredLanguage; // If locales array exists, prefer selecting pl-PL as the default entry if (Array.isArray(data.l10n.locales)) { const hasPL = data.l10n.locales.some(x => x.locale === preferredLanguage); if (!hasPL) { // If pl-PL is missing, add a minimal entry so the app accepts it data.l10n.locales.push({ locale: preferredLanguage }); } } // Optional label set hint some builds look at: if (data.l10n.languageCodeMetadata && !data.l10n.languageCodeMetadata[preferredLanguage]) { data.l10n.languageCodeMetadata[preferredLanguage] = { learnerDisplayName: "Polski", authorDisplayName: "Polski" }; } } // Older builds: labelSet / iso639Code sometimes used if (data.labelSet && typeof data.labelSet === "object") { data.labelSet.iso639Code = preferredLanguage; } // Course-level hints (harmless if absent) if (data.course && typeof data.course === "object") { data.course.locale = preferredLanguage; if (data.course.defaultLocaleId == null || data.course.defaultLocaleId === "en") { data.course.defaultLocaleId = preferredLanguage; } } } } catch (e) { // ignore } return data; }; } } catch (e) { // ignore } })(); </script> <!end of added scriptI will try to follow your advice step by step. Is this <script> pasted in the appropriate place? (just before the closing <head> tag)
That looks like the right spot yes!
MarcinZarod We have the same issue. I've inspected the exported SCORM code from Rise and found the issue and I have a small script that can be added to the SCORM to override the Langue data property that is causing the <html> "lang" property from being set to "en".
- Decompress the exported SCORM zip.
- Open the file: scormcontent/index.html (SCORM 1.2 example)
- Change the <html lang=""> value to the right language code so when loading the html document the correct language is recognized by screenreader software for example upon loading the html document.
- The javascript method called "__fetchCourse" is responsible for loading all the course data. This course data is base64 encoded in the exported SCORM scormcontent/index.html. So one option is to decode this base64 encoded json object and adjust the property values for "labelSet.iso639Code", "course.locale" and "course.defaultLocaleId".
- Another option (the one we use) is to add a script to the scormcontent/index.html that overrides this iso639Code data property with the appropriate language value. To do this you need to add this script right before the closing <head> tag in the scormcontent/index.html file.
- Set the javascript const named "preferredLanguage" to a value you need. In our case: "nl-NL".
- This script will execute after the course data is loaded and replaces the language Rise forced. Then the regular javacript will pick this new value and updates the <html lang=""> property on the index.html document with the new correct language value.
<script> (function () { try { const preferredLanguage = "nl-NL"; // Ensure the HTML lang is correct as early as possible if (document && document.documentElement) { document.documentElement.lang = preferredLanguage; } // Monkey-patch __fetchCourse so Rise receives nl-NL var origFetch = window.__fetchCourse; if (typeof origFetch === 'function') { window.__fetchCourse = async function () { var data = await origFetch(); try { if (data) { if (data.labelSet && typeof data.labelSet === 'object') { data.labelSet.iso639Code = preferredLanguage; } if (data.course && typeof data.course === 'object') { data.course.locale = preferredLanguage; if (data.course.defaultLocaleId == null || data.course.defaultLocaleId === 'en') { data.course.defaultLocaleId = preferredLanguage; } } } } catch (e) { // ignore } return data; } } } catch (e) { // ignore } })(); </script>
It worked with SCORM! Thank you so much peterkeijsers, I wonder if it's possible to create a similar script that would ovverride the language setting when exporting a RISE course to the web?
It's been 8 months since somebody reported this issue. We are trying to publish a course which was written in Polish and we NEED to fulfill accessibility criteria for the EU. This is a MAJOR issue. Is there a way to change the html setting of the course while exporting it as a web page to Polish?
Hi MarcinZarod!
Glad to see peterkeijsers has been helping you. Happy to jump in here!
Rise 360 does not support setting a source language code at the time of publishing. We're tracking a feature request to introduce this level of functionality, and I've included your voice in the report.
In the meantime you can set the Polish language code (PL) by following our traditional XLIFF translation process. Once that's complete, and your Rise content is published, the Web output should inherit this setting. Here's how:
- Duplicate your Rise 360 course.
- Export the XLIFF file, and set your language code to PL, for Polish.
- Open the XLIFF file with your preferred text editor and confirm the source language code is included.
- Import your XLIFF file back into the duplicated Rise course, then publish to Web.
Let me know how it goes!
It followed your tips to the letter. I typed "pl-PL" in the "Set source course language code:" window. Then I re-uploaded the Xliff file. And still after publishing it to the web, when I open the "index.html", the language indicated there is still English... The same happens when I publish to SCORM. HELP. My deadline is almost over and I have no idea what to do. My client will not accept a version marked as ENGLISH when the entire course is in Polish. The accessibility criteria are not met!
HI,
Is there any news regarding this issue? I've the same problem: no way to change the lang in HTML, Storyline is unable to show all the elements to assistive technology because it creates a sort of video, that's why I chose Rise, but this is a serious issue, too. I changed all the labels, but it's not enough, please help, my client needs a prefectly structured accessible learning object as soon ...
Thanks
Hi MarcoLoVullo-fd!
Thank you for the feedback!
I don't have any updates to share at this time, as our development team prioritizes other enhancements. I've relayed your feedback to our product team, and we'll be sure to notify you of any new developments!
Hi,
is there something going on with this "wrong" language setting? In the EU the EU Accessibility Act is coming into everyones focus and the Rise courses are still in lang="en" (I used the built in label language "German" today with no other result than getting "en"). It is getting urgent now. We need the correct language setting in the code.
Thanks.
Ralf
Hi RalfHartmann-16!
Thanks for checking in on this!
Currently, Rise 360 courses do not support the ability to define the course language, within the HTML output. We understand this can be confusing for learners, as well as authors, and I've shared your feedback with our product team!
We'll be sure to notify you if we release a Rise 360 enhancement, to define the language in the HTML output and disable browser auto-translation, when unnecessary.
NadineBergmann : You have discovered a "bug" in how courses are published.
I just did a test in which I set the Rise Labels to German, as would be done for a course in German. Yet when I published it, it still shows html lang = "en" (indicating the page is in English). Which, as your question stated, is a problem, because a screen reader would say words based on English pronunciation instead of German.
At this point, that means you'll need to open your HTML source files with a text application, and then edit them to change the language from English to Dutch.
By the way, I would have done my testing in Dutch, but the Labels are only available in English, French, German, and Spanish.
JoseTansengco : The publishing settings should have a way to indicate the language to be used in the HTML header tag. And that should be a priority.
Judy, unfortunately if you change the html so lang="nl", once the course loads it changes back to lang="en" so editing the html in a text editor is not a solution anymore, I believe it used to be but there must have been a recent change to prevent this.
Although you could add lang="nl" to the <body> tag, it stays. But I'm not sure how this will affect translation software.
Hi JoseTansengco, thanks for your reply. I don't need a translation of the course. The course is made in Dutch and should remain in Dutch. The issue is that in HTML the source language is shown as English (lang=en) and that doesn't help screenreaders/accessibility when working in Dutch.
The question is whether there is some way to change the source language in HMTL.
Hi NadineBergmann- & JudyNollet!
Thank you for bringing this to our attention!
I was able to replicate the same behavior you shared. When publishing a Rise 360 course that has been translated to a language other than English, the HTML source language tag, remains in English. I understand how this could be problematic for those using screen readers, so I've filed this behavior as a bug in Rise 360. I've linked this discussion to the bug report so we can notify you as soon as a fix is in place.
Have a great start to your week!
Hi StevenBenassi,
Thanks for this! May I add that it would be great if not only after translating, but also already in the export you could indicate the language. This since not every course is produced in English first, but in another language (and wouldn't need translation) hereby also considering the option to have labels in different languages.
Thanks!
Hello NadineBergmann-
Thank you for sharing what your learners are experiencing with your course.
Do you know when this course was created? We implemented an update in October to allow authors to select the source course language when exporting the training.
Hi Leslie,
Thanks for your answer. I assume you mean the option to select the source course language for translation/exporting xliff-files? That I have found, but would mean that I would have to translate the whole course (whereas the course is already in the "final" language)? Or am I overseeing something?
Thanks!Hi NadineBergmann-,
The option shared by Leslie is only to help translation apps recognize the source language of the text they are translating. That option doesn't automatically translate the entire course to a different language if this is what you are asking about. You'll still need to export the translation file, have it translated by a translation app or service, and then upload it back to the Rise 360 course to translate it.
