Foreign Languages

Watch the Video

Video Transcript

SETTING YOUR COURSE LANGUAGE

Courses with foreign language content present unique accessibility challenges. For instance, screen reader software will determine the primary language of content and use that language for all pronunciation. Unless foreign languages are properly coded, they will usually be pronounced with English pronunciation, which can harm language learning for users of screen readers.

The first step to foreign language accessibility in Canvas is to set the language for the entire course Links to an external site.. To do this, go to Settings in your Canvas course, then scroll down to the Language dropdown box. Select the language, then select "Update Course Details."

The course language should be the primary language used throughout the course. At Ball State, the default language is English, so only change this if your main course language is not English. For instance, if almost all of your course is in Arabic with a few smaller pieces of English text, you should set the course language to Arabic.

SETTING TEXT CONTENT LANGUAGE

The next step to foreign language accessibility in Canvas is to mark the language of any text content that is not the primary course language. For example, if you course language setting is English but includes content in Japanese, you would mark up any text content in Japanese.

This is done through the HTML lang= attribute. This HTML attribute identifies what language a piece of text content is written in through a two-letter code. For example, here is the code for an English (en) paragraph:

<p lang="en">This is an English paragraph.</p>

And here is the code for a French (fr) paragraph:

<p lang="fr">Ceci est un paragraphe français.</p>

To use these language codes, you'll need to toggle the HTML editor in the bottom-right of the Rich Content Editor . From there, you can search for all paragraphs by pressing Ctrl+F (PC) or Cmd+F (Mac) and searching for <p>. This will highlight the opening paragraph tags (which is where you place the language code). For any that are in a different language, replace them with <p lang="xx">, with xx being the appropriate language code Links to an external site.. For the vast majority of uses, you'll only need the two-letter language code. In some cases, however, such as when regional dialects are important, you'll need to add a region or script subtag. You can find any possible valid subtags through this language subtag lookup tool Links to an external site.. 

Changing language does not automatically change the reading direction, which is default left-to-right. To change reading direction, also add dir="rtl" to the opening paragraph code, resulting in the following:

<p lang="xx" dir="rtl">

You can also change reading direction under Format > Directionality.

FOREIGN LANGUAGE DEFINITIONS AND TRANSLATIONS

Foreign language definitions and translations are often presented side-by-side: English and the foreign language. When doing this, you have two options: a definition list or a table. Definition lists (a type of list that is commonly used for glossaries) require more extensive coding knowledge, so our recommendation is to build a table.

To build a table, follow the instructions in Step 7: Format Tables with Headers and Summary. From there, you'll need to apply the advice in the previous section regarding marking up text content in a foreign language. The English content can be left alone, then lang="xx" will need to be added to the foreign language content.

In the previous section, we showed you how to add lang= to paragraphs, indicated by <p> tags. For tables, though, you'll need to add them to <td> tags, since tables do not have paragraphs. Again, open the HTML editor from the bottom-right corner of the Rich Content Editor . Then, press Ctrl+F (PC) or Cmd+F (Mac) and to open the search window and search for <td>. This will find the open <td> tags, into which you can add lang="xx" with xx replaced by the two-letter language code of your choice. Do this for any table cell that has non-English content in it.

For example, here is a simple translation table:

And here is the code of the table, with lang="fr" added to the French <td> cells.

<table style="border-collapse: collapse; width: 98.5742%; height: 114px;" border="1">
    <caption><em>English-French Definitions</em></caption>
    <tbody>
        <tr style="height: 27px;">
            <th style="width: 49.9671%; height: 27px; text-align: left;" scope="col">English</th>
            <th lang="fr" style="width: 49.9671%; height: 27px; text-align: left;" scope="col">Le Français</th>
        </tr>
        <tr style="height: 29px;">
            <td style="width: 49.9671%; height: 29px;">grapefruit</td>
            <td lang="fr" style="width: 49.9671%; height: 29px;">pamplemousse</td>
        </tr>
        <tr style="height: 29px;">
            <td style="width: 49.9671%; height: 29px;">kite</td>
            <td lang="fr" style="width: 49.9671%; height: 29px;">cerf-volant</td>
        </tr>
        <tr style="height: 29px;">
            <td style="width: 49.9671%; height: 29px;">cold</td>
            <td lang="fr" style="width: 49.9671%; height: 29px;">froid</td>
        </tr>
    </tbody>
</table>