The lang attribute, to make the page audible... and understandable
One of the simplest accessibility elements to implement is also one of the most overlooked.
Thursday, October 5, 2023
In Luxembourg perhaps more than anywhere else, it is not uncommon for the same HTML page to contain words in different languages. Nothing extraordinary: what you hear on the Knuedler is reflected on the web.
While this coexistence is perfectly possible, there are two things that need to be taken into account to ensure that a screen reader reproduces the text as faithfully as possible:
Define a main language for the page
In the code, locate the <html> tag, i.e. the very first tag after the <!DOCTYPE html> declaration. Add the lang attribute to it. So, for a page written mainly or exclusively in French, the code will be: <html lang="fr">.
At this point it is worth reminding that the code for Luxembourgish is not "lu" - which corresponds to the Luba-Katanga spoken in the Democratic Republic of Congo - but "lb".
Specify each language change
Next, in the body of the page, you'll need to tell the screen reader when the text changes language, for example by framing the passages written in another language within the paragraph, as follows: <p>Of course, I don't like all his films, but he had the talent to adapt <span class="fr">Astérix et Obélix, mission Cléopâtre</span> for the cinema in 2002.</p>
If you are using a CMS to manage your site, it is likely to offer this type of functionality. Where this is not the case in the standard CMS, there are usually plug-ins available to manage language changes.
In doing so, you will help many users
Who will benefit from this? First and foremost, it will help blind and visually impaired people. They will struggle to understand the text read by the screen reader if it interprets a text or a portion of a text in the wrong language. But other users, such as those with dyslexia, can also use voice-based systems. The same comprehension challenges will affect them, if language changes are not clearly marked.
Below is a one-minute video to show you how the same paragraph is rendered by the JAWS screen reader, without and then with the language change indications:
Paragraph vocalisation
Transcription of video
No indication of language change in the code
[The following text is read in a French voice.]
De toute façon, dit Juliette, c’est ça ou une joint-venture. Je lui conseille de veiller aux lanceurs d’alerte. Elle referme Night flight, fixe son regard sur la photo des Twin Towers et elle évacue : non mais what's going on dear ? Antoine n’est plus whistleblower. De toute façon qui viendra fouiner sur un Health Data Hub ? Je m’insurge : la sécurité, c’est pas un nice to have, c’est un must have. Elle ignore, préfère partir en chantant Once there were two knights and maidens. They'd walk together. Out in the gardens. In all kinds of weather.
[heading level one] With indication of language change in the code
[The following text is read mainly in French, but each English expression is read in English]
De toute façon, dit Juliette, c’est ça ou une joint-venture. Je lui conseille de veiller aux lanceurs d’alerte. Elle referme Night flight, fixe son regard sur la photo des Twin Towers et elle évacue : non mais what's going on dear? Antoine n’est plus whistleblower. De toute façon qui viendra fouiner sur un Health Data Hub? Je m’insurge : la sécurité, c’est pas un nice to have, c’est un must have. Elle ignore, préfère partir en chantant Once there were two knights and maidens. They'd walk together. Out in the gardens. In all kinds of weather.
You can try your hand at this by using or editing the code on the codepen.io website, using the page from the video.
By ensuring your text is properly tagged, you check off no fewer than four criteria on the list of elements required for an accessible website:
- 8.3: your page has a default language;
- 8.4: the language code defined for the page is relevant;
- 8.7: each language change is indicated in the source code;
- 8.8: the language code for each language change is valid and relevant.
And yet, in the audits regularly carried out by the Information and Press Service on a selection of public sites, while the language attribute defined at page level is almost never missing, language changes within the body of the page are very rarely indicated.
By the way... is my word in the dictionary?
Conversely, be careful to use the lang attribute only when necessary. Some words borrowed from English are now found in French dictionaries. Planning is one of them. In a page written in French, it is therefore not necessary to specify it in the code. If in doubt, do not hesitate to consult the official dictionaries for the languages frequently used on public Luxembourgish websites:
- for Lëtzebuergesch: Lëtzebuerger Online Dictionnaire (LOD ) (using spellchecker. lu may help to detect words missing from the dictionary);
- for French: Trésor de la Langue Française informatisé;
- for German: Digitales Wörterbuch der deutschen Sprache;
- for English: Oxford English Dictionary.
To conclude, let's mention some reasons other than those strictly related to accessibility. Getting the language right will be a great help to online translation tools (think of the automatic page translation service provided by Google Chrome). We can also think of other flexible options: for example, third-party programmes included on the page (such as a video player) will display their navigation menu in the language specified on the page. Finally, on a purely stylistic note, hyphenation management via the hyphens property is provided by the browser when you fill in the lang attribute for the languages supported by your browser.
For more information, we recommend reading Adrian Roselli's article on the topic.