Tagging Foreign Languages in Canvas for Accessibility

[laura_r_hamrick]

Hi all,

I'm working on a project right now to help move some old language placement exams into Canvas and was tasked with coming up with some accessibility best practices and guidelines for our faculty when creating foreign language exams. 

One particular issue that came up specifically because of the foreign language content was the question of how to tag your content so that it is read out by screen readers in the appropriate language. The only way I've found to do this is to go into the HTML Editor and add a lang attribute like this:

<span lang="es">Quiero ir a la playa</span>

Does anyone know of a less-tedious way to do this?  We are currently planning to have a student employee go through and review each and every exam question, and it is going to take a while, so if there's a faster way to get this done that would be awesome. 

That being said, if you're not already doing this, I'd say it's definitely good to do if you know that you will have screen reader users accessing foreign language content. I was really surprised what a difference it made to the screen reader experience. Here are two demo videos I created in VoiceOver with some different languages to show faculty what students will hear:

This video is currently being processed. Please try again in a few minutes.

This video is currently being processed. Please try again in a few minutes.

If these videos or the tutorial are useful to you, please feel free to share them with your own faculty! Here are the links:

Asian language example [video]

European language example [video]

Tutorial on adding language tags in Canvas [Google Doc]

Anyway, please chime in if you a) know of any faster ways of accomplishing this, b) have other tips for foreign language content accessibility in Canvas, or c) have any questions or comments about any of the above content!

[emichela]

I've tried to get this approach to work several times without success. What other settings did you have? Does it work in all browsers? Did you have VoiceOver set to a certain language?

[maguire]

Is all of the content in a given course room in the same language? And if it is a language course, so you do not mind if the GUI switches to this language - you can set the language for the course. This will override most of the other means of the language being set for the course.  See the order used at: https://github.com/instructure/canvas-lms/blob/master/lib/locale_selection.rb

Alternatively, if the course is a single language and you want the user to be able to choose the language used for the GUI, then you could have a script that accesses each page and adds the lang attribute to the HTML elements.

If you have some lang attributes already set, your script could check for this and then leave them, but if the HTML element has no lang attribute, then add the specified language.

If you are interested in such a script, please let me know - I'm thinking about writing such a script this summer.

---------------------

A problem in Canvas is that the selection of the "locale" affects both the GUI and the content of the web pages delivered. It should be possible to set the language for a course without affecting the language used for the GUI.

If so, you could easily have a script that accesses each page and adds the lang attribute to the HTML tags.

[maguire]

I now have a python script that adds (some) language tags to resources in a Canvas course room. You can find the script language_tag_a_course.py at https://github.com/gqmaguirejr/Canvas-tools . Currently, the script processes the published Pages, Syllabus, Assignments, and (classic) Quizzes. As usual, if you update a quiz, you will get a warning when you view the quiz that states that students will not see the updated quiz until you save it. Just click on the save button.

Note that I only added the lang attribute to top-level elements of the content and I do not add this attribute if one already exists (so if someone has already specified the lang attribute, I do not overwrite it). This also means that you can run the script repeatedly and it will not perform updates when there is nothing to change. Additionally, note that the page heading generated by Canvas before the contents of a page is included is not language tagged. Thus for a wikipage you will get:

<div class="show-content user_content clearfix enhanced" data-resource-type="wiki_page.body" data-resource-id="104962" data-lti-page-content="true">
 
    <h1 class="page-title"> ...

However, I think this tagging goes a long way toward avoiding the need to set a course-specific language and thus unnecessarily blocking users from using their choice of language for the GUI. Hopefully, it will improve the accessibility of the course material for users.

As it seems the API for updating new quizzes is still not finished, I will not try to do anything with them.

A special thanks to @albertSol for his posting https://community.canvaslms.com/t5/Canvas-Developers-Group/Canvas-API-call-to-update-an-existing-qui... -- this provided the information that I needed to complete the update for a classic quiz question with answers.

Next, I will look at Discussions and Announcements.

----------

Some things that could be improved:

If you use the class "enhanceable_content tabs" for multiple language presentation, you have to manually add the tags:

<div class="enhanceable_content tabs">
    <ul>
        <li lang="sv"><a href="#fragment-1">Svenska</a></li>
        <li lang="en"><a href="#fragment-2">English</a></li>
    </ul>
<div id="fragment-1" lang="sv">

and later

 <div id="fragment-2" lang="en">

  It is still left to the user to language tag parts of the page that are in a language other than the one they have specified to be applied to the top-level elements.