Our general recommendations for including multiple translations for your content are as follows:

• Translate the most important pages first
• Page-level translations
• Add a note to the top of the page
• Use the LANG attribute
• Work with existing campus services
• Changing the color of the text

Translate the important pages first

It is recommended that you focus on translating the most important pages first. Specifically, the pages you think will be trafficked the most. This ensures that the important content is available to those who need it, in the format they expect it in.

Page level translations

Our recommendation is to include both English and translations right in the same page. 

Add a note to the top of the page

A note at the top of the page that makes the user aware that the page offers multiple translations of the content is very helpful - especially for users who may be navigating the page using a screen reader.

Example: 

Note: This page is offered in both English and ___ languages.

Use the LANG attribute

A LANG attribute should be added to the HTML - inline. This helps indicate where changes in languages occur. This is a nice reference for both screen readers and browsers.

Example:

<p>This sentence will be read in English.</p>

<p lang="en-GB">This sentence will be read in English, but with a British accent.</p>

<p lang="es">Esta frase es en Español.</p> (Spanish - “This sentence will be read in Spanish”)

More information on the LANG attribute (including the various language codes) can be found on the W3Schools website.

Work with existing campus services

Cultural Linguistic Services (CLS)

The Cultural Linguistic Services group can assist you with your translations to make sure they are accurate and make sense. We recommend connecting with them if you require assistance with your translations.

DoIT Center for User Experience

The DoIT Center for User Experience team can assist with answering questions related to accessibility and user-experience.

Changing the color of the text

Changing the color of the text to differentiate between the different language translations can be tricky for the following usability/accessibility reasons:  

• Text colors have specific uses on websites. The color red, for example, typically designates an error. 
• Users who are non-sighted or color blind may not be able to note the differences. 
• Text in certain colors can affect readability. If not well contrasted, the text could be too light to read or blend in with the background. Also, certain colors can be jarring to the eye when used for entire paragraphs.

Therefore, we would caution against using this approach in general. 

Troubleshooting

If these options do not fit your needs, please reach out to further discuss how to deliver your content to your audience: help@doit.wisc.edu