HTML elements with lang and xml:lang must have the same base language

Rule ID: html-xml-lang-mismatch
Ruleset: axe-core 4.7
User Impact: Moderate
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

Start for free

Compliance Data & Impact

User Impact

Moderate
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Cognitive

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

WCAG Success Criteria [WCAG 2.1 (A)]

  • 3.1.1: MUST: Language of Page

WCAG Success Criteria [WCAG 2.0 (A)]

  • 3.1.1: MUST: Language of Page

How to Fix the Problem

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

If required, duplicate the value of the lang attribute as the value of the xml:lang attribute on the html element.

Remember to set the lang attribute value in the opening html element and spell the value correctly. For example, if the primary language of a document is English, specify the language as: 

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

Language value codes include some dialects such as "en-US" to differentiate American English from UK English< or "fr-CA" to differentiate Canadian French from European French. You can find a list of language and dialect codes on the ISO Codes for the Representation of Names of Languages web page.

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

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

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

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

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

Why it Matters

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. Multiple languages are an issue for users who speak and access websites in multiple languages. It is essential to specify a default language and ensure that it is valid for screen readers to function correctly.

Screen readers use different sound libraries for each language, based on the pronunciation and characteristics of that language. Screen readers can switch between language libraries easily, but only if documents specify which language(s) should to read. If the language is not specified, screen readers read documents in the user's default language, resulting in garbled language. It can be challenging to understand anything when screen readers are using the wrong language library.

Rule Description

The 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 other than the default. The xml:lang attribute value, if included on the html element, must duplicate the value of the lang exactly.

The Algorithm (in simple terms)

Ensures every HTML document has a lang attribute with a valid value and, if present, the xml:lang value duplicates the lang value.

Resources

Deque University Course Pages (subscription required)

  • Language

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

  • H57: Using language attributes on the html element

Refer to the complete list of axe 4.7 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted:

'; document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; if (!!window.MSInputMethodContext && !!document.documentMode ) document.getElementById("form_message").innerHTML = checkMark + msg + "
"; else document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; } if(type === "warning" ) { document.getElementById("form_message").style.color = "#916216"; document.getElementById("form_message").innerHTML = warningIcon + msg + "
"; } if(type === "error" ) { document.getElementById("form_message").style.color = "#b40909"; document.getElementById("form_message").innerHTML = errorIcon + msg + "
"; } document.getElementById("form_message").tabIndex = -1; document.getElementById("form_message").focus(); } function clearMessage() { document.getElementById("form_message").innerHTML = ""; } function showFeedbackForm() { document.getElementById("feedback-form").className = ""; document.getElementById("feedback-info").className = "deque-hidden"; document.getElementById("yesButton").focus(); setTimeout((function (){ document.getElementById("yesButton").focus(); }), 5000); } function hideFeedbackForm() { if( feedbackData ) { document.getElementById("feedback-info").className = ""; showMessage("You have cancelled editing your earlier feedback.", "warning"); } document.getElementById("feedback-form").className = "deque-hidden"; document.getElementById("yesButton").style.display = ""; document.getElementById("noButton").style.display = ""; document.getElementById("noFeedback").className = "deque-hidden"; setTimeout((function() { clearMessage(); }), 4000); }