How the HTML lang attribute helps Accessibility?
When configuring a screen reader, users select a default language. If the language of a webpage is not specified, the screen reader assumes the default language set by the user. Language settings become an issue for users who speak multiple languages and access website in more than one language. It is essential to specify a language and ensure that it is valid so website text is pronounced correctly.
Screen readers use different sound libraries for each language, based on the pronunciation and characteristics of that language. Screen readers can switch between these language libraries easily, but only if the documents specify which language(s) to read and when. If the language is not specified, the screen reader reads the document in the user's default language, resulting in a strange accent. It is impossible to understand anything when screen readers are using the wrong language library.
What is the HTML Lang Attribute?
The HTML lang attribute is used to determine the language of the text used on any webpage. This attribute's primary purpose is to signal the language of the main document.
It is also used by online readers that change languages to display the correct pronunciation and accent of the webpage content.
The HTML lang tag is supported by commonly used web browsers such as Chrome, Internet Explorer, Firefox, Safari, and Opera.
Why is the HTML Lang Attribute Important and Useful?
The HTML lang attribute is crucial because it helps search engines like Google, Bing, Yandex, and others to return language-specific results on the SERP.
If you have several versions of a webpage for different regions or languages, you should inform the search engines about these versions. This will help the search engines display the best version of your site based on their language or location.
Here are some of the top reasons why the HTML lang tag is useful:
It helps the search engines understand the correct language of the webpage: This improves the quality of the search results because the search engines can return results based on the searcher’s linguistic preferences.
Browser extensions and other software such as translation tools can use the lang tag to display the information in the correct language.
Lang tags also let you vary the styling of the content by language: for example, you can set a specific font for a particular language. Besides, user agents can make automatic font selections based on the document's language.
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.
Best Practices of HTML 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 ISO 639 language code.
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.
References
1. https://www.boia.org/blog/how-the-html-lang-attribute-helps-accessibility
2. https://www.seoptimer.com/blog/html-lang-attribute/
3. https://dequeuniversity.com/rules/axe/4.8/html-has-lang