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

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Hearing

Standards: WCAG 2.2 Level A

Written and researched for humans by humans

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expertly reviewed by

Comments: 0

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

Text in one language text in another language Copy

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

Code example

Arabic text here 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.