Hey everybody. Josh here with Online ADA, bringing you another video from the WCAG accessibility guidelines. In this video, we’re covering 3.1.1–Language of the Page. This is a single A level requirement.
Let me jump into the description here. It’s a short one–“the default human language of each web page can be programmatically determined.” That’s it.
This is actually a fairly simple rule and it’s very easy to comply with. All we have to do is on our HTML element–the tag, which is typically the very first tag in our document–we simply have to add one attribute and optionally a second one for backwards compatibility. I’ll touch on that in a second. That attribute is gonna be lang. L-A-N-G. The value of that attribute is going to be a two digit country code um, for instance, the most common one being English, from where I’m from. It would just be EN. So lang equals EN–that goes on the HTML tag. Done! The document is now identified as English language.
Now you can also provide a secondary, optional sub code that can go along with it. It’s denoted by the EN dash, or hyphen, and then a two-digit sub code character. This is important because it can identify variances in the primary language such as British English versus American English. There are two different codes for that, for instance. Now there is quite a lot of different character codes that you can use, language codes, I should say. There are lists online that you can find.
It’s important though that we’re identifying the core language of the page at the very beginning for a number of reasons. I personally do not know the Braille language myself, but the documentation tells us that identifying the language of the page allows Braille translators to substitute out control codes for accented characters. Additionally, it can insert codes necessary to prevent erroneous creation of Grade 2 Braille contractions. so for those users who are using Braille translators, this is gonna be huge for them–very important.
Also a lot of speech synthesizers on the web, which is where the browser will read back to you with a synthesized voice, they take a lot of cues from what language we have identified the page as. So, this will also help them with pronunciations and getting more accurately the word because if you’re identifying the page as English, but you have a Spanish word on the page, it probably will sound like um, you know–it’ll just butcher it most of the time because it doesn’t understand that’s Spanish. But if you switch the language over to Spanish, that’s actually a second subset of this article, which is identifying languages of the parts, and I’ll get into that more later, but in another video.
But this one says, just in the document itself, If you can identify that we’re on English, then it’ll read with the English language and it’ll understand those words better. Also marking the language can assist user agents in providing definitions using a dictionary. So a couple of really important pieces there and that’s gonna help for people who have difficulty understanding the content as a whole. It helps them not have to put in as much effort to try to understand all the content. They can just get it that much easier, so. Also people with short-term memory loss– things like that. We’re gonna have a whole lot more opportunity to present the content to them accurately if it’s in the correct language and identified as such.
I did mention that I was gonna touch on a backwards compa– compatibility portion of this as well and that is, um, in older websites, sometimes they were served up in a language called X HTML. This is not as common anymore, but there are still a lot of sites around that do this. They serve up X HTML in a way that presents it as just regular HTML and in those cases, to achieve backwards compatibility along with that LANG attribute, you can also apply an XML colon LANG attribute, and they take the same country codes and sub codes as well. That just identifies it for those X HTML pages as well. So having both of those attributes on your HTML tag, which is the very first element on the page, is gonna go a long ways towards getting you compliant.
Thanks for watching, I’ll see you in the next video.