Languages

Now, let's talk about language. So, you need to set the language of your page and the language of parts on the page.

So, if we're going back to the W3C side, on the top right, you see this all translations page.

This is not super useful at the moment for the page that we've been on, because that has not been translated.

But if we look at Spanish, we see that there are several pages that have been translated into Spanish.

So if we go to the business case for digital accessibility, we see that this is translated into Spanish.

And there is an English version, of course, that has been the basis for that.

Now, when a screen reader accesses a page, they need to know what is going on, what is this website in, what is that content for, in what language is that content.

And it does that on the language that the website specifies.

So if you look into the code, so that's how you usually test that, you see that there

is, I'll try to make this a little bit bigger, you see that there are some attributes on

the HTML element and one of that says langen.

And that basically says the whole language, the general language of this page is English.

There are a couple of ways to do this. Lengen is the most common one, but you could even use regional variations like en-gb for Great Britain.

And then, you know, you would say like, oh, this should be British English. That might make a difference in some cases.

Usually you can just use like the generic, like most top level language because it doesn't matter.

And also you have to have this language installed in your system.

Otherwise, there will be no announcement at all or it will try to read it in the language of the screen reader.

And that, you know, will sound funny.

Now if we go back to the Spanish page.

We see that it's changed to language equals yes for Espanol. So that basically says, oh, this whole page now is Spanish and everything is translated like this.

Let's jump to a content button, all the links here.

This is translated.

So everything is basically translated, even the Chrome around the actual article.

So you can go and change the HTML here at the top.

But sometimes you have places where you have Swedish text inside of an English page or

something like that. And in those cases, you want to use the lang attribute as well,

but you want to put it onto that specific element or on that specific container.

So if we go back to the, to the Espanol Spanish section here, and we go to inspect that,

because the surrounding page is English, right? This is an English page with Spanish content,

and actually with a lot of languages like here's Greek, and here is German. And so you have these

different sub languages that you want to support, you know, you want this translator

announcement and the headings, you want them to be announced in the language that is actually used,

because that's what the user would search for. And as you can see here, the definition list that

is inside of this details basically says like the language is Spanish, and then that means everything

inside here is Spanish, apart from this second, uh, uh, the second DD third item inside of this,

uh, diff, which is in English. So in this case, the, um, uh, the screen reader can basically

switch languages in between, and this was for such a page. This makes a lot of sense. Now

You don't want to always use language switching all the time.

For example, if you have like the one Spanish language word inside of an English text, like hola, he said, you know, and there are sentences before and afterwards in English.

You don't want to switch this one word in general because switching languages can incur a short delay.

So you have a longer time that you have there that you need to wait as a screen reader user and that can be a little bit disrupting.

Also, a lot of language is just like very common in the language that you're using.

For example, in German, you wouldn't translate the word computer or something like that.

So, you know, even if it's not laid out like that or the language tag is not on there, it still would be easy or easy enough to understand.

But, you know, for a page with that, with a lot of like changing languages, it makes total sense to do it.

Let's take a look at what WCAG is saying about that. There we go. One and the other. Open it. So, success criterion 3.1.1 is the default human language of each web page can be programmatically determined.

So that basically says like, oh, you have to provide as a website, you have to provide that information in a programmatical way.

There are a couple of ways to do this.

Apart from the HTML way, for example, you can configure your server to send the language with it.

Or you can, you know, set meta tags as well.

It's like there are multiple ways to do it.

The HTML one is the most simple one and that always works.

And then we have language of parts.

The next success criterion 3.1.2, which is a double A success criteria.

While the language of the whole page is a single A success criteria.

And that basically says 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. So that's basically what I said, like,

oh, if this could belong to that text, then you don't have to do this. Yeah. And this

is basically what you need to do to make sure that those meta things work properly.

Thank you.