Language of parts
This information relates to criterion 3.1.2 Language of parts, which states:
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.
How is this different from 3.1.1 Language of page?
In the last criterion, we learned about the language of the whole page. This is set on the
<html> element. It ensures that a screen reader reads the whole page in the correct language.
This criterion, language of parts, is for when the page is in one language but then a word of phrase is in a different language from the rest of the page. Any words or phrases that are in a different language must have the language of that part marked up separately so that a screen reader will switch to the pronunciation of that language.
How do you mark up language of parts?
The lang attribute can be added to most elements. You can add it to a
<p> tag or even to a
<span> tag. It must use the recognised language codes .
Your code should look something like this:
<h3>Finnish</h3> <p>I read quite a lot of web content in Finnish, as I used to live there. As long as it is marked up as Finnish, it will read correctly, e.g.</p> <p lang="fi">Nimeni on Nicki. Asun Suomessa ja puhun vähän suomea.</p> <h3>French</h3> <p>We use quite a few French phrases, even when we speak English. It is important that the French phrase is marked up as being French, even in the middle of a sentence.</p> <p>I have been working on my French pronunciation and when I said, <q lang="fr">Je m'appelle Nicki. J'ai un chien d'assistance,</q> my class gave me a spontaneous round of applause!</p>
This will display as:
The following video has no captions. It is JAWS reading the above text, first with the correct pronunciation and then using English pronunciation. The text that it is reading is on the screen and is the text we have just used in the example.
This hopefully shows the difference between a screen reader reading text in the correct language and reading it in the default language.