WEBVTT Kind: captions Language: en 00:00:01.140 --> 00:00:05.780 (upbeat instrumental music) 00:00:05.780 --> 00:00:07.360 - [Narrator] Hi There and welcome! 00:00:07.360 --> 00:00:10.640 In this brief video, you’ll learn the key concepts for how and why 00:00:10.660 --> 00:00:13.020 to designate the primary page language, 00:00:13.020 --> 00:00:16.700 as well as language changes of parts within the page. 00:00:16.700 --> 00:00:20.780 Correct language designation is very important for screen reader users. 00:00:20.780 --> 00:00:23.820 Most screen readers can read multiple languages. 00:00:23.820 --> 00:00:27.280 When a screen reader user installs and configures their software, 00:00:27.280 --> 00:00:29.400 they select a default language. 00:00:29.400 --> 00:00:32.236 If they come to a website that is in a different language, 00:00:32.240 --> 00:00:35.180 this can either be a smooth, trouble-free experience, 00:00:35.180 --> 00:00:37.460 if the language is correctly designated, 00:00:37.460 --> 00:00:41.380 or it can sound like a jumbled mess that is impossible to understand. 00:00:41.380 --> 00:00:45.560 Let’s take a look at the requirements and best practices for designating the language. 00:00:45.560 --> 00:00:48.380 First, let’s address the primary language of the page. 00:00:48.380 --> 00:00:51.880 This is the language that all or most of the web page is written in. 00:00:51.880 --> 00:00:53.560 There are two requirements. 00:00:53.560 --> 00:00:59.160 First, the primary language of the page must be identified accurately on the HTML element. 00:00:59.160 --> 00:01:02.760 So let’s take a look here inside this Deque University course. 00:01:02.760 --> 00:01:05.580 Inside the page source, I see this attribute, 00:01:05.580 --> 00:01:09.200 lang equals en, and it’s right on the HTML element, 00:01:09.200 --> 00:01:10.320 where it should be. 00:01:10.320 --> 00:01:11.380 Excellent. 00:01:11.380 --> 00:01:16.140 Second, the primary language of the page must be identified with a valid value. 00:01:16.140 --> 00:01:20.900 So here the value is en, which is the valid standard language code for English. 00:01:20.900 --> 00:01:26.720 If, for example, it was written as lang = English, this is invalid and would not be accurately 00:01:26.720 --> 00:01:28.660 recognized by a screen reader. 00:01:28.660 --> 00:01:33.300 So let’s say that I speak Spanish and English, and my default language on my screen reader 00:01:33.300 --> 00:01:34.760 is set to Spanish. 00:01:34.770 --> 00:01:39.760 If I came to this page with lang = English, the screen reader would not recognize it 00:01:39.760 --> 00:01:43.460 and would instead read the English words with Spanish pronunciation. 00:01:43.460 --> 00:01:46.300 The same would happen if there were no lang value at all. 00:01:46.300 --> 00:01:48.600 The screen reader would just read the contents 00:01:48.600 --> 00:01:51.600 with the pronunciation rules of the default language. 00:01:51.600 --> 00:01:55.400 Now let’s address language of parts or inline language changes. 00:01:55.400 --> 00:02:00.140 Say that most of my web page is written in English, but there is a paragraph in French. 00:02:00.140 --> 00:02:04.160 I need to correctly communicate this language change to the screen reader. 00:02:04.160 --> 00:02:05.760 So the first rule is that: 00:02:05.760 --> 00:02:10.140 Inline language changes must be identified with a valid lang attribute. 00:02:10.140 --> 00:02:13.220 The lang attribute can be applied to block level elements, 00:02:13.220 --> 00:02:16.640 such as div, heading 1, paragraph, and so on, 00:02:16.640 --> 00:02:20.180 and to inline elements, such as span, strong, etc. 00:02:20.180 --> 00:02:24.520 And again, remember that the code must be a valid standard language code. 00:02:24.520 --> 00:02:26.560 So let’s listen to an example here. 00:02:26.560 --> 00:02:30.520 Here is a page that is written primarily in English, with a French sentence. 00:02:30.520 --> 00:02:36.060 In this example, the inline language change specification is missing from the HTML. 00:02:36.060 --> 00:02:41.320 So at first, the screen reader correctly pronounces the English words with English pronunciation, 00:02:41.320 --> 00:02:43.026 but then it comes up to the French words 00:02:43.026 --> 00:02:46.440 and also pronounces them with English pronunciation rules. 00:02:46.440 --> 00:02:48.440 Let’s listen to what that sounds like. 00:02:48.440 --> 00:02:51.300 - [Screen Reader Voice] My friends and I went to a fancy French restaurant 00:02:51.300 --> 00:02:53.680 and they were impressed when I ordered my meal like a native. 00:02:53.680 --> 00:02:58.280 (speaking French with English pronunciation rules) 00:02:58.280 --> 00:02:59.640 - [Narrator] So that gives you an idea 00:02:59.640 --> 00:03:01.694 of what a screen reader user might encounter 00:03:01.700 --> 00:03:04.340 if the language is not correctly designated, 00:03:04.340 --> 00:03:07.220 both the primary language and language of parts. 00:03:07.220 --> 00:03:09.880 Now let’s quickly discuss language codes. 00:03:09.880 --> 00:03:12.300 The language code used must be valid. 00:03:12.300 --> 00:03:14.560 There are standard, two-letter language codes 00:03:14.560 --> 00:03:17.920 that we’ve listed in the Semantic Structure and Navigation course, 00:03:17.920 --> 00:03:19.980 so you can use those for reference. 00:03:19.980 --> 00:03:24.800 Note that some screen readers support more specific, localized language designation, 00:03:24.800 --> 00:03:28.200 like en-au for Australian English. 00:03:28.220 --> 00:03:31.400 However, this is less widely supported by screen readers, 00:03:31.400 --> 00:03:35.960 so just the two-letter codes should be used instead as a best practice. 00:03:35.960 --> 00:03:39.840 This concludes this brief tutorial on correct language designation.