What does this accessibility issue mean?
Accessibility issue summary: HTML XML lang mismatch with HTTP header
HTML lang attributes identify the language used on a webpage.
If the declared language in the lang tag is different from the language specified in the HTTP header, it can cause issues for screen readers and language tools.
Pages with a mismatch between HTML/XML and HTTP header lang attributes violate WCAG (Level A) guidelines. This accessibility issue is related to WCAG rules around Page Language.
Solution:
Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page.
Example HTML violation: HTML XML lang mismatch (WCAG Level A Issue)
<!DOCTYPE html>
<html lang="en" xml:lang="fr" class="no-js">
<head></head>
<body>
<meta charset="UTF-8">
<title>Accessibility Test Page</title>
<p>Welcome to the accessibility test page.</p>
</body>
</html>The above HTML violates the html-xml-lang-mismatch accessibility rule because the language defined in the lang and xml:lang attributes is different. This can cause conflicts or confusion for users, especially those using assistive technologies.
How to fix "HTML XML lang mismatch (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" xml:lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Accessibility Test Page</title>
</head>
<body>
<p>Welcome to the accessibility test page.</p>
</body>
</html>Here is the corrected version, where both lang and xml:lang attributes specify the same language i.e., English (en):
