The Importance of Identifying the Language of Parts

by Damian Sian

Identify the Language of the Page and Parts for an Accessible Experience

There are two WCAG success criteria that deal with language; 3.1.1. Language of Page and 3.1.2 Language of Parts. The first criterion asks content creators to identify the language of the document in the HTML header and the second criterion requires the identification of individual pieces of content. In the following two passages, the visual presentation of multi-lingual content is identical, but the programatic encoding of the two passages will produce different experiences for assistive technologies when they are parsed. Assistive technologies can read with the correct phonetic pronunciation when designed and coded properly. Conversely, when pieces of multi-lingual content are not programmatically identified, assistive technologies will not be able to present the phonetically accurate synthesized speech. 

Sample Passage with Incorrect Language Identified

Il était une fois une maman cochon qui avait trois petits cochons. Elle les aimait beaucoup, mais comme il n'y avait pas assez de nourriture pour qu'ils puissent tous manger à leur faim, elle les a envoyé tenter leur chance dans le vaste monde.

Sample Passage Correct Language Identified

Il était une fois une maman cochon qui avait trois petits cochons. Elle les aimait beaucoup, mais comme il n'y avait pas assez de nourriture pour qu'ils puissent tous manger à leur faim, elle les a envoyé tenter leur chance dans le vaste monde.

Experience with a Screen Reader

Unless a user has a customized preference in their browser to swap fonts for the French language, the two passages will appear visually identical. However, a screen reader like JAWS will read content of the first passage incorrectly with an English pronunciation and the second passage with the correct French pronunciation. Per the correct and expected behavior, the screen reader will first honor the language of the page, and then the language of the part. The following video demonstrates JAWS reading the same text passage incorrectly and correctly. In the incorrect passage the French word "qui" is phonetically pronounced as "/k'wi/" rather than as "/ˈki/" in the proper French pronunciation.

How to Test on Web

Using this simple bookmarklet, a developer or content author can review for both the language of the page and language of parts. 

Screen shot of Web Evaluation bookmarklet identifying English page with French parts

How to Remediate

Adding a language identifier to a paragraph tag <p lang="fr"> will demarcate the paragraph as French. Similarly, adding the language identifier to a span tag <span lang="fr"> will demarcate a single word in the correct language. 

Other Considerations

Correctly identifying the language of the page and language of parts allows search engines to better and more accurately index pages. In addition, it allows for user preferences in Web browsers to substitute typefaces which they may find better suited to the presentation of certain languages. In addition, users that set Web browser preferences for translation will have a better user experience as their browser prompts them for the availability of languages to translate. 

Resources