If you don’t have a vision disability, you probably don’t think about the language of web content very often. However, missing language tags are a common accessibility issue: In a 2022 analysis performed by non-profit WebAIM (Web Accessibility In Mind), 22.3% of the internet’s top 1 million websites failed to include language tags on their homepages.
The Web Content Accessibility Guidelines (WCAG), considered the international standards for digital accessibility, addresses this issue in WCAG 2.1 Success Criterion 3.1.1, “Language of Page,” which reads:
The default human language of each Web page can be programmatically determined.
To conform with this success criterion, you simply need to include the HTML language attribute, lang, on each web page and document (including PDFs). Below, we’ll explain why this is important — and how to avoid a common mistake when using the lang attribute.
HTML language tags improve speech output for assistive technologies
Correct usage of the lang attribute benefits people who use screen readers (software that outputs text as audio). Most screen-reading applications use different pronunciation rules depending on the document’s language.
For example, in British English, the word “vitamin" is pronounced VIT-uh-min. In American English, the same word is pronounced “VAI-tuh-min.” You want your readers to hear your content as it was written; the proper language tag will ensure that the screen reader output matches your intent.
The lang attribute also has other benefits. If a web browser translates your document, for example, it may be able to change line spacing or apply other language-dependent styling — but only if you’ve correctly identified the original language.
Related: How Screen Readers Are Used in Accessibility Testing
Don’t confuse HTML language tags with hreflang tags
The HTML lang attribute is often confused with another attribute: hreflang. Here’s how each tag works:
-
The lang attribute informs user agents (such as web browsers) of the language of the current web page or document.
-
The hreflang attribute informs user agents of the location of different versions of the current web page or document.
You can use both attributes on your website, but they serve different purposes. Every page should include an HTML lang tag. Not every page needs hreflang.
So, why does hreflang exist? The attribute is helpful for search engine optimization (SEO) if you have multilingual versions of your website optimized for different local areas. Using hreflang helps search engines categorize each page properly — ensuring that French readers are served the French version of your website, English speakers receive the English version, and so on.
Related: If SEO Matters to Your Business, Accessibility Matters
Test your website for missing HTML lang attributes
Most content management systems (CMSs) will implement the lang attribute automatically on every page. In WordPress, for example, the lang attribute can be set by opening Settings, then General.
However, if your content uses multiple languages — or if you’re using a custom CMS — you may need to set the tag manually. Some quick tips:
-
The default lang attribute should indicate the most commonly used language on each page.
-
If multiple languages are used equally, the lang attribute should be set to the first language that appears in the content.
-
If a web page uses multiple languages, you’ll need to declare the language of each enclosed element to override the default value.
-
Make sure to use the correct language code. The full list of acceptable lang codes can be found in the Network Working Group’s Best Current Practice (BCP) 47.
Finally, make sure that all web documents have an appropriate language tag. That’s especially important for PDFs — many websites fail to follow the best practices of PDF accessibility, which can create unnecessary frustration for people who use screen readers and other assistive technologies.
Related: How The HTML Lang Attribute Helps Accessibility
An accessible website provides all users with a better experience
You should check your HTML lang attributes regularly as part of a broader accessibility audit. The Bureau of Internet Accessibility provides a free automated website analysis that tests content against WCAG 2.1 Level AA success criteria.
However, for optimal digital compliance, you should test your website using a combination of automated and manual tests. To learn more — and to build a sustainable web accessibility strategy — send us a message to connect with a digital accessibility expert.
