Ensure That HTML Elements With Both Valid lang and xml:lang Attributes Agree On the Base Language of the Page

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

Web accessibility standards state that an HTML document must contain a valid lang attribute or must correspond to a valid lang code for multilingual screen reader users. If it’s included in the HTML element, the xml:lang attribute value must be identical to the value of the lang.

Why It Matters

When setting up a screen reader, users need to select a default language. When a website’s language is not specified, the screen reader will use the default language as set by the user. 

Multiple languages are an issue for users who speak and access websites in multiple languages.

By setting the language of a web page, you ensure content is pronounced correctly. 

Fixing the Issue

Add a lang attribute value to the html element (e.g. <html lang=”en”>) to indicate the primary language of the document.

Remember to set the lang attribute value in the opening html element and to spell it correctly.

Good Code Example

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

In the event of a document containing multiple languages, specify language values as required:

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

Be sure to specify languages written right-to-left using the dir attribute:

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

Conversely, you may also specify left-to-right languages via the dir=”ltr” attribute value.

Test Cases

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