(upbeat instrumental music)

- [Narrator] Hi There and welcome! In this brief video, you’ll learn the key concepts for how and why to designate the primary page language, as well as language changes of parts within the page.

Correct language designation is very important for screen reader users. Most screen readers can read multiple languages. When a screen reader user installs and configures their software, they select a default language. If they come to a website that is in a different language, this can either be a smooth, trouble-free experience, if the language is correctly designated, or it can sound like a jumbled mess that is impossible to understand. Let’s take a look at the requirements and best practices for designating the language.

First, let’s address the primary language of the page. This is the language that all or most of the web page is written in. There are two requirements. First, the primary language of the page must be identified accurately on the HTML element. So let’s take a look here inside this Deque University course. Inside the page source, I see this attribute, lang equals en, and it’s right on the HTML element, where it should be. Excellent.

Second, the primary language of the page must be identified with a valid value. So here the value is en, which is the valid standard language code for English. If, for example, it was written as lang = English, this is invalid and would not be accurately recognized by a screen reader. So let’s say that I speak Spanish and English, and my default language on my screen reader is set to Spanish. If I came to this page with lang = English, the screen reader would not recognize it and would instead read the English words with Spanish pronunciation. The same would happen if there were no lang value at all. The screen reader would just read the contents with the pronunciation rules of the default language.

Now let’s address language of parts or inline language changes. Say that most of my web page is written in English, but there is a paragraph in French. I need to correctly communicate this language change to the screen reader. So the first rule is that: Inline language changes must be identified with a valid lang attribute. The lang attribute can be applied to block level elements, such as div, heading 1, paragraph, and so on, and to inline elements, such as span, strong, etc. And again, remember that the code must be a valid standard language code. So let’s listen to an example here. Here is a page that is written primarily in English, with a French sentence. In this example, the inline language change specification is missing from the HTML. So at first, the screen reader correctly pronounces the English words with English pronunciation, but then it comes up to the French words and also pronounces them with English pronunciation rules. Let’s listen to what that sounds like.

- [Screen Reader Voice] My friends and I went to a fancy French restaurant and they were impressed when I ordered my meal like a native.

(speaking French with English pronunciation rules)

- [Narrator] So that gives you an idea of what a screen reader user might encounter if the language is not correctly designated, both the primary language and language of parts. Now let’s quickly discuss language codes. The language code used must be valid. There are standard, two-letter language codes that we’ve listed in the Semantic Structure and Navigation course, so you can use those for reference. Note that some screen readers support more specific, localized language designation, like en-au for Australian English. However, this is less widely supported by screen readers, so just the two-letter codes should be used instead as a best practice.

This concludes this brief tutorial on correct language designation.