Foreign words and phrases: accessibility for content authors

  • Author: Access iQ ®
  • Date: 24 Jan 2013
  • Access: Premium

Quick facts

  • Any text in a language that is different to the default language of the page must be appropriately identified.
  • Identifying the language is important for people who use screen readers or text-to-speech technology that converts text into synthetic speech.
  • You must use the right language code to identify text otherwise screen readers or text-to-speech technology won't know which language you are talking about because it affects pronunication.

If you use foreign words and phrases in your content, you need to mark words or passages using the language attribute, as identified in Success Criterion 3.1.2 Language of parts:

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)

The language attribute tells the screen reader what language to use so that it can pronounce the words correctly. Most screen readers support multiple languages and can switch between languages as they read out a page.

For example, if a French phrase appears in a page with English text, the screen reader will switch to French pronunciation for that phrase. However, if the French phrase isn't identified using the language attribute, the screen reader won't know to switch languages. Instead of the French phrase being read out using proper French pronunciation, the screen reader user will hear the French phrase in an English accent, which will result in mispronunciation.

Your developer should have set the default language of the page for you. That means that if your website is predominantly in English, then that will already be specified. It is your job to make sure that any content that you add that is in a different language is marked appropriately.

Identifying language changes

Whenever there is content that is different to the default language for the page, you must identify the change in language for that piece of content. It could be a single word within a sentence, a phrase within a paragraph, or the whole paragraph.

Note: You do not identify the change in language for assimilated words that have become part of everyday language such as résumé, rendezvous and tsunami.

You identify changes in language using the HTML language attribute, which when applied to a piece of text essentially says, "This piece of text is in French".

Most WYSIWYG editors won't have an option to identify the language of text, so you will need to add the language attribute in HTML. Most content management systems allow you to view and edit the HTML code for your page. If you are not sure how to do this, ask your developer.

The exact form of the language attribute will depend on whether your website uses HTML or XHTML:

  • If your website is in HTML, use the <lang> attribute.
  • If your website uses XHTML, use the <xml:lang> attribute.

If you are not sure if your website uses HTML or XHTML, you can use both <lang> and <xml:lang>. This is the method that has been used in the examples below.

A paragraph in a foreign language

If you have paragraph of text where the whole paragraph is in a different language, you can add the language attribute to the paragraph element.

Let's say you are writing a key phrase that people may need if they are travelling to France. One such phrase is "Can you speak English?" or in French "Est-ce que vous parlez anglais?"

Example 1:

Using the lang attribute to identify a paragraph written in French.

  1. Add the <lang> attribute inside the <p> element at the start of the paragraph:

<p lang="" xml:lang=””>Est-ce que vous parlez anglais?</p>

  1. Add the language code between the quotation marks. Refer to the Appendix at the end of this article for a list of language codes. You must choose a language code from this list — you cannot make up your own, otherwise the screen reader will not know what language you are trying to define:

<p lang ="fr" xml:lang=”fr”>Est-ce que vous parlez anglais?</p>

A word or short phrase in a foreign language

If you have a single word or multiple words within a paragraph in a different language, you will need to use the <span> element with the <lang> attribute.

Let's say you are writing about La Bocca della Verita on a travel website that is in English. You want to add the sentence "La Bocca della Verita is known as the Mouth of Truth in English."

You will need to use the <span> element with the <lang> attribute to identify that the words La Bocca della Verita are in Italian, while the rest of the sentence is in English.

Example 2:

Using the lang attribute to identify a place name written in Italian.

  1. Add <span> before the first word and </span> after the last word that is in a different language:

<p><span>La Bocca della Verita</span> is known as the Mouth of Truth in English.</p>

  1. Add the <lang> attribute inside the <span> element:

<p><span lang="" xml:lang=””>La Bocca della Verita</span> is known as the Mouth of Truth in English.</p>

  1. Add the appropriate language tag:

<p><span lang="it" xml:lang=it”>La Bocca della Verita</span> is known as the Mouth of Truth in English.</p>

The rest of the sentence is in English, which in this example is the default language of the page so you don't need to mark it as English text.

A quote in a foreign language

Let's say you are writing about Voltaire, the French enlightenment writer, historian and philosopher and want to include a quote from him that is in French.

You will need to add the <lang> attribute to the <blockquote> element.

Example 3:

Using the <lang> attribute to identify a quote written in French.

  1. Add the <lang> attribute inside the <blockquote> element that is at the start of the paragraph:

<blockquote lang="" xml:lang=””>

  <p>

    C'est encore peu de vaincre, il faut savoir séduire. Voltaire.

  </p>

</blockquote>

  1. Add the language code between the quotation marks:

<blockquote lang="fr" xml:lang=”fr”>

  <p>

    C'est encore peu de vaincre, il faut savoir séduire. Voltaire.

  </p>

</blockquote>

You can use these steps to apply the <lang> attribute to the <q> element that is used to define quotes within a sentence.

See the topic on Information and relationships for more information on the <blockquote> and <q> elements.

Multiple languages in a page

You can apply any of the above methods to text within a webpage that is in multiple languages.

Let's say that you have a paragraph of text with the word or words for 'good morning' in English, German, French, Japanese and Italian.

Using the method described above for a word or short phrase, we can add the appropriate language for each occurrence of 'good morning' in a different language.

Example 4:

Using the <lang> attribute when there are multiple languages within a webpage:

<p>There are many ways to say good morning to someone: Good morning in English, <span lang=”de” xml:lang=”de”>Guten morgen</span> in German, <span lang=”fr” xml:lang=”fr”>Bonjour</span> in French, <span lang=”ja” xml:lang=”ja”>Ohayou</span> in Japanese or <span lang=”it” xml:lang=”it”>Buon giorno</span> in Italian.</p>

The default language for this page is English, so there is no <lang> attribute on 'good morning'.

WCAG 2.0 references

Related Techniques for WCAG 2.0

Appendix: language codes

Language Language code
English EN
American English EN-US
British English EN-GB
Spanish ES
French FR
German DE
Italian IT
Dutch NL
Greek EL
Portuguese PT
Arabic AR
Hebrew HE
Russian RU
Chinese ZH
Japanese JA
Hindi HI
Korean KO
Latin LA