How to Apply Language Attribute Tags

Language attribute tags allow assistive technology (AT) like screen readers and other text-to-speech AT to voice text in its native language. Using language tags in your HTML content in Canvas ensures that assistive technology (AT) like screen readers and other text-to-speech AT will pronounce the words accurately, which is critical for correct interpretation of foreign language content.

Without language attribute tags, foreign languages are read with the default English pronunciation and may be largely incomprehensible. For languages with non-Latin alphabets, screen readers and text-to-speech AT may not read out the text at all without a language attribute. For example, watch this video of a screen reader reading various Asian languages in which the characters are not read correctly without the proper language attribute.

Steps for Adding Language Attribute Tags

Use the HTML Editor in the RCE.

Access your content in the Rich Content Editor (RCE), and select HTML Editor in the RCE toolbar.

For this tutorial, we will use the following sentence: "Translate the following to English: Quiero ir al cine."

In the HTML Editor mode, find the specific phrase that is in a different language, and type "<i lang="xx">" immediately before it. Replace "xx" with your particular language code listed below. This example is using "es" for the Spanish (Español) language code. Then add </i> to close the language attribute tag.

Use the language code list for languages not listed here

• Chinese (simplified): "zh"
• French: "fr"
• German: "de"
• Italian: "it"
• Japanese: "ja"
• Korean: "ko"
• Russian: "ru"
• Spanish: "es"

Now everything inside the opening and closing <i> tags will be pronounced according to the language specified, while everything outside the <i> tags will be pronounced in English (or the default language).

Special Note: Some screen readers will ignore the lang attribute on <span> tags because span tags are a generic inline container element and do not inherently represent anything. The <i> tag is the idiomatic text element and does not represent italics text (<em> is used for italicized text). In current HTML5, the <i> element is used to represent text which is different (idiomatic in some way to the surrounding text. This can be an alternative voice or mood, technical terms, and words in other languages.