Ensure Every HTML Document Has a lang Attribute

Yotam Flohr
Researcher
Blind Hearing
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

An HTML document must contain a valid lang attribute or must correspond to a valid lang code for multilingual screen reader users who may prefer a language that differs from the default.

Why It Matters

When going through the screen reader setup process, users select a default language. If the language of a webpage is not specified, the screen reader resorts to the default language set by the user. 

Language settings become a problem for users who speak multiple languages and access websites in more than one language. It is essential to specify the language of a webpage and ensure that it is valid so website text is pronounced correctly.

Fixing the Issue

Developers need to add a lang attribute to the html element (e.g. <html lang=”en”>) that represents the primary language of the document.

Make sure you identify a language in the opening <html> element and that the attribute is spelled correctly.

You can even specify some dialects with codes such as “en-US” to highlight American English or “fr-CA” for Canadian French. 

Good Code Example

Code example
<html lang="en"> <!--document head and body--> </html> Copy

If the language changes within a document, you can specify this as follows:

Code example
<p>Text in one language <span lang="es">text in another language</span></p> Copy

If you are using a language that is written right to left, be sure to specify this using the dir attribute:

Code example
<p lang="ar" dir="rtl">Arabic text here</p> Copy

If you would like to specify that a language is written left to right, you can fill the value of the dir attribute with the value “ltr”.

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library