Indicating Foreign Language Content in a Canvas Page

---

• Use Foreign Language Code & Customize
• Watch Video Tutorial
• Read Step-By-Step Text Tutorial

Assistive technologies depend on you leveraging the rich content editor to format content, which enables students to navigate and access your content. 

If you are teaching a foreign language in Canvas that has some instruction in English and some in a foreign language, you will need to add tags for each of the specific foreign language phrases or words using the HTML Editor  Links to an external site.using language attributes (you can also brush up on your basic HTML elements, if needed). 

Using language attributes in your Canvas page allows screen readers to pronounce foreign language words properly. This is critical for the correct representation of foreign language content.

Watch how screen readers read the content with and without language attributes:

• Estimated View Time
• 1:03 mins

Accessibility in Foreign Language in Canvas Transcript

Use Foreign Language Code & Customize 

How Do I Edit the Code?

Find the specific phrase that is in a different language, and type “<span lang=“xx”>” immediately before it. Replace “xx” with your particular language code listed below. Go to the end of the phrase and type “</span>”.

Code

Customize the yellow highlighted "xx" below with your desired language code.

<span lang=“xx”> Buenos días, Jason Momoa. ¿Cómo estás? </span> 

Check Your Understanding

The language is Spanish in the example code above. Use the Language Code list below to determine the correct answer. 

What should the language code "xx" be replaced with?

Language Code

Find the foreign language you are teaching. Note Canvas supported languages Links to an external site..  Here is a short list of languages and respective language tags:

• Greek: "el"
• Spanish: “es”
• Chinese: “zh”
• French: “fr”
• German: “de”
• Italian: “it”
• Japanese: “ja”
• Korean: “ko”
• Russian: “ru”

For more languages, review the unofficial Language Subtag Lookup Links to an external site. tool, which provides a user-friendly front-end tool to the IANA registry Links to an external site.. 

Video Tutorial

Watch this video to learn how to assign the correct language codes to help a screen reader read the content correctly:

• Estimated View Time
• 2:43 mins

Foreign Language Code Tutorial Transcript

Text Tutorial

Step 1: Open Rich Content Editor

In Canvas, open the Page, Announcement, Assignment, Discussion, Quiz, or Syllabus that you would like to add the foreign language phrase or word. 

For example, let's add Greek Language Tags to a Canvas page. Our language code will be "el" for Greek. 

First, open the page and select Edit. 

Next, select HTML Editor 

 

Step 2: Copy & Paste Code in the appropriate locations

First, note that where <span> tags are nested

Having properly nested code is a WCAG 2 Level A requirement (4.1.1). Notice how the opening and closing <span> tags are in between the <p> or paragraph tags.

As of April 2020, if you paste the closing <span> tag outside of the </p> element, Canvas will “fix” this nesting issue. However, it is an effective practice to get into the habit of pasting nested tags accordingly as constant Canvas updates may sometimes impact how it typically functions. 

Next, copy the first part of the code

Copy “<span lang=“xx”>” and immediately paste before the foreign language begins. Change the "xx" to your desired language code. In this example, we will use "el" for Greek. 

Then, copy and paste the last part of the code

Copy “</span>”.

Then place your cursor before the closing <p> tag and immediately after, paste “</span>”. It should look like this:

<span lang=“el”>&Omicron; &upsilon;&pi;&omicron;&lambda;&omicron;&gamma;&iota;&sigma;&tau;ή&sigmaf; &mu;&omicron;&upsilon; &mu;&eta;&lambda;ά&epsilon;&iota; &epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά.</span> 

Note that in the HTML Editor, that the foreign language may not look similar to your front-facing Rich Content Editor version. 

 

Step 3: Save All Your Work!

Select Save to save your new foreign language tags. You're all done!

Now apply these tags to the rest of your course where foreign language is located.