Tag non-English phrases in Canvas courses

• Overview
• Tag text in Canvas pages
  • Announcements and pages
  • Assignments
  • Discussions
  • Quizzes and exams
  • Syllabus
• Common issues
  • Return to the default editor
  • Unexpected characters
  • Punctuation
• Common language codes

Overview

Learners who are blind or visually impaired may use screen reader software to access information on computers. Screen readers work by reading the contents of documents and web pages out loud.

By default, Canvas courses taught for English-speaking learners are read in English. To make sure other languages are read with correct pronunciation, you should specially mark, or tag, the text with formatting called HTML.

The following is designed to help you locate non-English phrases in your courses and mark them to be read correctly by screen readers. The steps covered in this process are:

1. Identify text that needs to be tagged.
2. Open the HTML Editor in Canvas pages.
3. Find the text you wish to tag.
4. Apply tags to your text.
5. Save your changes.

Tag text in Canvas pages

This section describes the steps needed to tag text in announcements, pages, discussions, assignments, quizzes, and syllabi.

You're probably used to the default mode to edit your pages, called the Rich Content Editor. While the Rich Content Editor can do many things, it can't allow you to tag your text. Instead, you must open a special mode called the HTML Editor.

Instructions for opening the HTML Editor are included in each of the following subsections.

Announcements and pages

This section describes how to edit course announcements and pages, as the steps required are the same for both types.

1. Edit the page title:
   1. Navigate to the page you want to edit.
   2. Examine the page title for any non-English words, which are not supported in page titles. If any non-English words are present:
      1. Open the Rich Content Editor by selecting Edit in the top right-hand corner of the page.
      2. Provide the English translation for all words in the page title.
      3. Add the non-English title as a new section heading.
      4. Continue with steps 2 through 4 below to tag the non-English words or phrases in your new heading.
2. Identify text to be tagged:
   1. If you have not already done so, navigate to the page you want to edit.
   2. Review your page and identify any text that is in a language other than English, whether appearing as words, phrases, or whole sentences.
   3. Make note of the location of each piece of text you need to tag so you can find them in the HTML Editor. It can be useful to identify key words surrounding the text you want to tag.
3. Open the HTML Editor:
   1. Open the Rich Content Editor by selecting Edit in the top right-hand corner of the page.
   2. When the Rich Content Editor appears, it will display your page as it generally appears to your learners, but it will be in an editable format. To open the HTML Editor, click Switch to raw HTML editor (). This will display the HTML code of the page, which you can then edit.
4. Tag the text:
   1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
   2. Place the following text in front of the text you would like to tag: <span lang="es">.
   3. Place the following text after the text you would like to tag: </span>.
   4. Check your tags. If correct, your text should be similar to this:

      <span lang="es">Este frase es en español.</span>

   5. If you have additional non-English text to tag, repeat for each word or phrase.
   6. When you are finished editing your text, select Save at the bottom of the page to save your changes.

Assignments

1. Edit the page title:
   1. Navigate to the assignment you want to edit.
   2. Examine the assignment title for any non-English words, which are not supported in page titles. If any non-English words are present:
      1. Open the Rich Content Editor by selecting Edit or Edit Assignment Settings, depending on the type of assignment, located in the top right-hand corner of the page.
      2. Provide the English translation for all words in the page title.
      3. Add the non-English title as a new section heading.
      4. Follow the instructions in steps 3 through 5 below to tag the non-English words or phrases in your new heading.
2. Edit the assignment rubric:

   Unfortunately, built-in Canvas rubrics do not fully support HTML tags. Rubrics should include text in English only. If necessary or desired, include an alternative rubric containing non-English words as a downloadable document linked from the assignment description.

   1. If you have not already done so, navigate to the discussion whose rubric you want to edit.
   2. Examine the rubric for any non-English words, which are not supported in Canvas rubrics. If any non-English words are present:
      1. Edit the rubric by selecting the Edit (pencil) icon in the top right corner of the rubric.
      2. Provide the English translation for all words in the rubric.
      3. When you are finished editing, select Update Rubric at the bottom of the rubric to save your changes.
3. Identify text to be tagged:
   1. If you have not already done so, navigate to the page you want to edit.
   2. Review your page and identify any text that is in a language other than English, whether appearing as words, phrases, or whole sentences.
   3. Make note of the location of each piece of text you need to tag so you can find them in the HTML Editor. It can be useful to identify key words surrounding the text you want to tag.
4. Open the HTML Editor:
   1. Navigate to the assignment you would like to edit.
   2. Select Edit Assignment Settings.
   3. When the Rich Content Editor appears, click Switch to raw HTML editor ().
5. Tag the text:
   1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
   2. Place the following text in front of the text you would like to tag: <span lang="es">.
   3. Place the following text after the text you would like to tag: </span>.
   4. Check your tags. If correct, your text should be similar to this:

      <span lang="es">Este frase es en español.</span>

   5. If you have additional non-English text to tag, repeat for each word or phrase.
   6. When you are finished editing your text, select Save at the bottom of the page to save your changes.

Discussions

This section describes editing discussion instruction pages.

1. Edit the page title:
   1. Navigate to the discussion you want to edit.
   2. Examine the discussion title for any non-English words, which are not supported in page titles. If any non-English words are present:
      1. Open the Rich Content Editor by selecting Edit in the top right-hand corner of the page.
      2. Provide the English translation for all words in the page title.
      3. Add the non-English title as a new section heading.
      4. Follow the instructions in steps 2 through 4 below to tag the non-English words or phrases in your new heading.
2. Identify text to be tagged:
   1. If you have not already done so, navigate to the page you want to edit.
   2. Review your page and identify any text that is in a language other than English, whether appearing as words, phrases, or whole sentences.
   3. Make note of the location of each piece of text you need to tag so you can find them in the HTML Editor. It can be useful to identify key words surrounding the text you want to tag.
3. Open the HTML Editor:
   1. Navigate to the discussion you want to edit.
   2. Select Edit at the top of the page to open the Rich Content Editor.
   3. When the Rich Content Editor appears, click Switch to raw HTML editor ().
4. Tag the text:
   1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
   2. Place the following text in front of the text you would like to tag: <span lang="es">.
   3. Place the following text after the text you would like to tag: </span>.
   4. Check your tags. If correct, your text should be similar to this:

      <span lang="es">Este frase es en español.</span>

   5. If you have additional non-English text to tag, repeat for each word or phrase.
   6. When you are finished editing your text, select Save at the bottom of the page to save your changes.

Quizzes and exams

You can tag quiz text in several places: in the quiz instructions, quiz questions, in question answers for some question types, and in feedback text.

1. Edit the page title:
   1. Navigate to the quiz you want to edit.
   2. Examine the quiz title for any non-English words, which are not supported in page titles. If any non-English words are present:
      1. Open the Rich Content Editor by selecting Edit in the top right-hand corner of the page.
      2. Provide the English translation for all words in the page title.
      3. Add the non-English title as a new section heading.
      4. Follow the instructions in step 3 below to tag the non-English words or phrases in your new heading in the quiz instructions.
2. Identify text to be tagged:

   Non-English text can potentially appear in multiple locations in your quiz, for example:

   • Quiz instructions
   • Questions
   • Question feedback
   • Question answers
   • Answer feedback

   It may be helpful to determine in advance which questions will need to be edited, and whether they contain options or feedback that also have non-English text. Keeping track of needed changes in a document or list may also be useful.

   1. If you have not already done so, navigate to the quiz you want to edit.
   2. Review your quiz and identify any text that is in a language other than English, whether appearing as words, phrases, or whole sentences.
   3. Make note of the location of each piece of text you need to tag so you can find them in the HTML Editor. It is useful to identify key words surrounding the text you want to tag.

   In order to view question and answer feedback items, you may have to open the question editor or feedback editor. Review the Edit the question feedback and Edit the answer feedback steps below for instructions on opening these editors.

3. Edit the quiz instructions:
   1. Open the instructions HTML Editor:
      1. Navigate to the quiz or exam page. Select Edit towards the top of the page.
      2. Make sure you are on the Details tab (if you have just opened the page, this will be the tab opened by default).
      3. To edit HTML in the instructions, click Switch to raw HTML editor ().
   2. Tag the instructions text:
      1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
      2. Place the following text in front of the text you would like to tag: <span lang="es">.
      3. Place the following text after the text you would like to tag: </span>.
      4. Check your tags. If correct, your text should be similar to this:

         <span lang="es">Este frase es en español.</span>

      5. If you have additional non-English text to tag, repeat for each word or phrase.
      6. When you are finished editing the instructions, you can either continue reading this section for information on editing other parts of the quiz or exam, or, if you are finished, you can select Save at the bottom of the page to save your work.
4. Edit the quiz questions:
   1. Open a question in the HTML Editor:
      1. If you have not already, navigate to the quiz or exam page. Make sure you are on the Details tab (if you have just opened the page, this will be the tab opened by default).
      2. Select Edit towards the top of the page.
      3. To edit HTML in quiz questions, select the Questions tab.
      4. To edit HTML in a question, select or mouse over the question you want to change and select the Edit (pencil) button that appears.
      5. In the question editor view, click Switch to raw HTML editor ().
   2. Tag the question text:
      1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
      2. Place the following text in front of the text you would like to tag: <span lang="es">.
      3. Place the following text after the text you would like to tag: </span>.
      4. Check your tags. If correct, your text should be similar to this:

         <span lang="es">Este frase es en español.</span>

      5. If you have additional non-English text to tag, repeat for each word or phrase.
      6. When you are finished editing questions, you can either continue reading this section for information on editing other parts of the quiz or exam, or, if you are finished, you can select Save at the bottom of the page to save your work.
5. Edit the question feedback:

   Questions can have customized feedback that displays based on the learner's response. The feedback options available depend on the type of question you use. A general guide for accessing question feedback is included in this section.

   Question feedback appears below each question as boxes that each contain an ellipsis (three dots).

   

   1. Open question feedback in the HTML Editor:
      1. If you have not already, navigate to the quiz or exam page. Make sure you are on the Details tab (if you have just opened the page, this will be the tab opened by default).
      2. Select Edit towards the top of the page.
      3. To edit HTML in quiz questions, select the Questions tab.
      4. To edit HTML in a question, select or mouse over the question you want to change and select the Edit (pencil) button that appears.
      5. To edit feedback, select the box that corresponds to the type of feedback (correct, incorrect, or neutral). A Rich Content Editor will appear.
      6. Click Switch to raw HTML editor ().
   2. Tag the question feedback text:
      1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
      2. Place the following text in front of the text you would like to tag: <span lang="es">.
      3. Place the following text after the text you would like to tag: </span>.
      4. Check your tags. If correct, your text should be similar to this:

         <span lang="es">Este frase es en español.</span>

      5. If you have additional non-English text to tag, repeat for each word or phrase.
      6. After you are finished editing the feedback, select Done below the editor.
      7. When you are done editing all feedback for the question, select Update Question.
      8. If you are finished editing your quiz or exam, select Save at the bottom of the page to save your changes.
6. Edit the question answers:
   Note:

   Options with HTML are only available for multiple choice and multiple answer question types.
   1. Open question answers in the HTML Editor:
      1. If you have not already, navigate to the quiz or exam page. Make sure you are on the Details tab (if you have just opened the page, this will be the tab opened by default).
      2. Select Edit towards the top of the page.
      3. Select the Questions tab.
      4. Select or mouse over the question you want to change and select the Edit (pencil) button that appears.
      5. To edit HTML in a question answer, select or mouse over the answer you would like to change and select the Edit (pencil) button that appears.
      6. When the editor opens, click Switch to raw HTML editor ().
   2. Tag the answer text:
      1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
      2. Place the following text in front of the text you would like to tag: <span lang="es">.
      3. Place the following text after the text you would like to tag: </span>.
      4. Check your tags. If correct, your text should be similar to this:

         <span lang="es">Este frase es en español.</span>

      5. If you have additional non-English text to tag, repeat for each word or phrase.
      6. After you are finished making your edits, select Done below the editor.
      7. When you are done editing all answers for the question, select Update Question.
      8. If you are finished editing your quiz or exam, select Save at the bottom of the page to save your changes.
7. Edit the answer feedback:

   Most question types can include customized feedback that appears if the learner selects a specific answer. The feedback will appear underneath each answer as a box containing an ellipsis (three dots).

   1. Open answer feedback in the HTML Editor:
      1. If you have not already, navigate to the quiz or exam page. Make sure you are on the Details tab (if you have just opened the page, this will be the tab opened by default).
      2. Select Edit towards the top of the page.
      3. Select the Questions tab.
      4. Select or mouse over the question you want to change and select the Edit (pencil) button that appears.
      5. To edit HTML for a question answer feedback, select the feedback box (correct, incorrect, or neutral) for that answer to open the Rich Content Editor.

         

      6. When the editor opens, click Switch to raw HTML editor ().
   2. Tag the answer feedback text:
      1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
      2. Place the following text in front of the text you would like to tag: <span lang="es">.
      3. Place the following text after the text you would like to tag: </span>.
      4. Check your tags. If correct, your text should be similar to this:

         <span lang="es">Este frase es en español.</span>

      5. If you have additional non-English text to tag, repeat for each word or phrase.
      6. After you are finished making your edits, select Done below the editor.
      7. When you are done editing feedback for all answers, select Update Question.
      8. If you are finished editing your quiz or exam, select Save at the bottom of the page to save your changes.

Syllabus

1. Identify text to be tagged:
   1. If you have not already done so, navigate to the syllabus page.
   2. Review your page and identify any text that is in a language other than English, whether appearing as words, phrases, or whole sentences.
   3. Make note of the location of each piece of text you need to tag so you can find them in the HTML Editor. It is useful to identify key words surrounding the text you want to tag.
2. Open the HTML editor:
   1. To edit the HTML on your syllabus page, navigate to the syllabus and click Edit towards the top of the page.
   2. When the Rich Text Editor appears, click Switch to raw HTML editor ().
3. Tag the text:
   1. Locate the non-English text you need to tag. If it's helpful, you can return to the Rich Content Editor by clicking Switch to rich text editor ().
   2. Place the following text in front of the text you would like to tag: <span lang="es">.
   3. Place the following text after the text you would like to tag: </span>.
   4. Check your tags. If correct, your text should be similar to this:

      <span lang="es">Este frase es en español.</span>

   5. If you have additional non-English text to tag, repeat for each word or phrase.
   6. After you are finished making your edits, select Update Syllabus below the HTML Editor.

Common issues

Return to the default editor

To return to the default Rich Content Editor from any page, click Switch to rich text editor (). It is always in the same location as the icon you clicked to toggle to the HTML Editor.

If you save your work while in the HTML Editor and edit your page again later, you will default back to the Rich Content Editor.

Unexpected characters

If you use any letters or punctuation that are not normally used in English and review them in the HTML Editor, you may notice that parts of your text have been replaced by a jumble of characters.

This is part of how HTML handles non-English letters and is not an error. Do not change these characters. If you do, then your text may display incorrectly to your learners. Once you return to the Rich Content Editor or save your changes, your text will go back to normal.

Punctuation

If your phrase includes punctuation, you can generally include the punctuation inside your <span> tag.

<p><span lang="es">¡Hola clase!</span> Today we will…</p>

Common language codes

To tag a language other than Spanish in your courses, change the tag to include the appropriate language code. The language code is a two- or three-letter abbreviation surrounded by quotes in your tag.

In the following tag, the code for Spanish is es:

<span lang="es">

In the following tag, the language code for French is fr:

<span lang="fr">

Commonly used language codes:

For an extensive listing that includes additional codes, see the W3Schools website.