Importance of Identifying 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. 

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

A screen reader like JAWS will read content with the correct pronunciation for a given language. The screen reader will first honor the language of the page, and then the language of the part. For example on a page set in English, JAWS will read a passage in French for example with a non-French pronunciation if it is not properly identified. The following video demonstrates JAWS reading the same text passage incorrectly and correctly. So a word like "qui" is pronounced phonetically as "k'wee" rather than as "key" in the proper French pronunciation.

How to Test

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

Screen Shot of the Web Evaluation bookmarklet exposing the metadata properties of an English page and French parts of content.

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 prompt them for the availability of languages to translate. 

Resources

W3C on how to declare language of pages

Changing parts of language by Maxability