lang attribute is one of the global HTML attributes developers can apply to any HTML element, and it can really help with accessibility. It allows you to specify the language of an element and all its child elements using a language “subtag”: a 2 or 3 character code defined by an international standards body.
A11y From the Beginning
This quick tip is part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning.
lang is most commonly found on the
html element, where the declaration can propagate to all content on the page. For example, a declaration of
<html lang="en"> tells the browser that all content on the page is English.
lang subtags may also have a script or region designator, which allows you to specify either the language’s writing system or geographic region. For example, a declaration of
<html lang="en-GB"> specifies United Kingdom English (color vs. colour, center vs. centre, etc.).
You can override an existing
lang declaration with a more specific
lang declaration to programmatically identify content that uses a language that’s different from the rest of the page. A section written in Spanish on an English page would look something like this:
<html lang="en"> <head>…</head> <body> <!-- English page content --> <aside lang="es"> <h2>Información para hispanohablantes</h2> <p><!-- Additional Spanish content --></p> </aside> </body> </html>
So why would we want to do this? A couple of reasons:
1. Translation and Interoperability
Identifying the content’s languages allows translation services such as Google Chrome to more accurately function. Since you’re speaking to a machine using code, you’re able to directly tell the foreign language-identifying algorithms that it should trigger a translation prompt.
The presence of a valid
lang attribute declaration also helps out other automated services that ingest and recontextualize website content. Additionally, it can serve as a styling hook for things like CSS’
2. Screen Readers
Some software that reads screen content out loud can also parse the
lang attribute, affecting how it pronounces the page’s content. This software is not just limited to assistive technology, either. Voice assistants like Alexa, specialized browser reading modes, navigation apps like Google Maps, public address systems, etc. can all have this functionality.
At the very least, proper use of the
lang attribute can add that extra je ne sais quoi to the experience, telling the software to read content out loud the way a person would.
At best, it aids in understanding your content. Voice-based interfaces lack a lot of the affordances that we take for granted with a visual UI, so it’s important to have them represent the content as accurately as possible.
Here’s a sample of how the popular screen reader JAWS treats content that has a
lang attribute properly applied to it. There will be two examples read aloud: one without, and one with the
lang attribute properly applied to the French part of the phrase, “In French, the phrase “May I use your bathroom?” is, ‘Puis-je utiliser votre salle de bain?’”
Semantically describing your content is one of those little things you can do as a developer to greatly enhance the experience of the people and services that use your websites and web apps.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post