R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

HTML and XML Language Attribute Mismatch

Rule ID: html-xml-lang-mismatch
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549


How to Fix the Problem

To resolve this issue, follow these steps:

  1. Add a lang Attribute to the HTML Element
    Every HTML document must include a lang attribute in the <html> tag to indicate the primary language of the content.
    Example:

    html
    <html lang="en">
    <!-- Your content here -->
    </html>
  2. Match the xml:lang Attribute (if used)
    If you’re also using the xml:lang attribute for XML compatibility, ensure that its value matches the lang attribute exactly.
    Example:

    html
    <html lang="en" xml:lang="en">
    <!-- Your content here -->
    </html>
  3. Use Correct Language Codes
    Use valid ISO 639 language codes. You can specify dialects if necessary:

    • en-US for American English

    • en-GB for British English

    • fr-CA for Canadian French

    • es-MX for Mexican Spanish

    Refer to the ISO 639 language codes list for a comprehensive guide.

  4. Support Multilingual Content
    For documents that include multiple languages, mark those sections appropriately:

    html
    <p>This is in English. <span lang="es">Esto está en español.</span></p>
  5. Set Text Direction When Required
    For right-to-left languages such as Arabic or Hebrew, use the dir="rtl" attribute:

    html
    <p lang="ar" dir="rtl">النص العربي هنا</p>

    For left-to-right languages (which is the default), you can specify dir="ltr" if needed.


Why it Matters

Setting the correct language attributes is vital for assistive technologies such as screen readers. Here’s why:

  • Screen Reader Accuracy: Screen readers rely on language settings to choose the correct pronunciation rules and voice profiles. Without a specified language, the screen reader defaults to the user’s preset language, which can result in garbled, unintelligible output.

  • Multilingual Accessibility: Documents with multiple languages need accurate tagging to switch between the correct voice engines. For example, reading Spanish text with an English voice engine can confuse users and hinder comprehension.

  • Inclusive Experience: Users who speak more than one language or who rely heavily on screen readers will benefit from accurate language tagging, enhancing usability and inclusivity.


Rule Description

The html element in any HTML document must include a valid lang attribute that accurately describes the primary language of the content. If the xml:lang attribute is also present (used primarily in XHTML or XML-compliant documents), its value must exactly match the lang attribute to avoid inconsistencies in language interpretation by user agents.


The Algorithm (in Simple Terms)

  1. Check the <html> tag for a lang attribute.

  2. Validate that the lang value is not empty and conforms to a valid ISO language code.

  3. If xml:lang is present, ensure it matches the lang value exactly.

Leave A Comment