The HTML lang attribute allows developers to specify the language of a document, webpage, or element. It’s a helpful declaration for ensuring that your content works predictably — and it’s especially important for improving digital accessibility.
When a person accesses your website with a screen reader (software that outputs on-screen content as audio or braille), the lang attribute determines how the software will operate. Most screen readers will change their pronunciation depending on the language of the content.When used correctly, the lang attribute can improve the experiences of users with disabilities in other ways:
- Web browsers can display characters and scripts correctly
- Media players and other third-party components can display text correctly
- Users can change fonts and make other adjustments with predictable results
Adding the lang attribute to your website may improve conformance with the Web Content Accessibility Guidelines (WCAG), the consensus standards for digital accessibility. WCAG 2.1 Success Criterion 3.1.1 requires that “the default human language of each web page can be programmatically determined.”
Below, we’ll take a closer look at the lang attribute and provide tips for implementation.
Avoid these common mistakes when using the lang attribute
While usage of the lang attribute is fairly straightforward, many webmasters make basic mistakes. Here’s an example of a correctly implemented lang tag:
<html lang="en-us">
The attribute uses a two-digit code to declare the default language, often followed by a two-digit code to declare the region of the language. That leads us to one of the most common lang attribute mistakes.
1. Make sure you use the correct language code
Don’t make assumptions about language codes. You might assume that <html lang=”en-uk” > refers to English as spoken in the United Kingdom — but the correct attribute is <html lang=”en-gb">.
The full list of acceptable lang codes can be found in the Network Working Group’s Best Current Practice (BCP) 47. Tools like the BCP47 Language Subtag Lookup can help you find the right code and check your tags.
2. Make sure your language attributes are consistent
Many websites declare languages with both HTML and XML. When this is the case, make sure that the HTML lang attribute is identical to the xml:lang attribute. For example:
<html lang="en-GB" xml:lang="en-GB"></html>
Likewise, you should make sure your hreflang attributes match your lang attribute (discussed below).
3. If your website uses multiple languages, you still need a lang attribute
Some pages may contain content in several languages (for example, many government websites are required by law to offer content in multiple languages). When this is the case, the lang attribute should indicate the most commonly used language on the page.
If all languages are used equally, set the lang attribute to the first language that appears on the page. You should also declare the language of each enclosed element to override the default value.
4. Don’t forget to declare default languages for documents
While the lang attribute is the most common tool for declaring default languages, it’s obviously limited to online content. Other types of content should also include appropriate identifiers.
You can add a /Lang entry to your PDFs using Adobe Acrobat Pro and other applications. The World Wide Web Consortium (W3C) provides a guide for adding /Lang entries using different PDF authoring tools.
Does the HTML lang attribute improve search positioning?
Many accessibility improvements are aligned with the best practices of search engine optimization (SEO). Declaring the language of your content may help search engines categorize your content — but search engines like Google often ignore lang in favor of hreflang.
So, what’s the difference? The hreflang tag is intended for declaring the language of hyperlinks, while lang is intended to describe on-page content for browsers and assistive technologies.
Ideally, each page of your website will use both the lang attribute and hreflang tags. Using both tags consistently will improve accessibility and may have a minor positive impact on SEO.
Related: 3 Quick SEO Tips (That Also Improve Accessibility)
Make sure your website uses the lang attribute correctly
For most types of content, lang implementation is fairly simple — but absolutely essential for accessibility. Missing lang attributes can be identified with automated tools or by viewing your site’s source code.
The Bureau of Internet Accessibility offers a free WCAG 2.1 Level AA compliance summary, which can help you find accessibility issues that affect your audience (including lang implementation issues). To build a comprehensive website accessibility strategy, contact our team to schedule a consultation.
