Quick Tip: Use the “lang” Attribute for Better Accessibility | How To
The 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.
Basic Use
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 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 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:
…
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’ quotes property.
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?‘”
Conclusion
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.