R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Valid Language Attribute Compliance

Rule ID: valid-lang
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549


How to Fix the Problem

To meet accessibility requirements and ensure proper screen reader behavior, follow these steps to apply valid language codes in your HTML:

  1. Specify the Primary Language Correctly:
    In your HTML document, declare the language of the entire page using the lang attribute in the <html> tag. Use ISO 639-1 two-letter language codes such as:

    html
    <html lang="en">

    This example sets the language to English.

  2. Use Region-Specific Language Codes (Optional):
    For dialects or regional variations, use extended language codes:

    html
    <html lang="en-US"> <!-- American English -->
    <html lang="fr-CA"> <!-- Canadian French -->

    This enhances accuracy for screen readers that rely on regional pronunciation.

  3. Specify Language Changes Inline:
    If parts of your document switch languages, use the lang attribute on inline elements:

    html
    <p>This is English <span lang="es">y esto es español</span>.</p>
  4. Set Text Direction Where Applicable:
    For right-to-left languages (e.g., Arabic or Hebrew), also specify the dir attribute:

    html
    <p lang="ar" dir="rtl">النص العربي</p>
  5. Avoid Common Mistakes:

    • Do not use misspelled language codes (e.g., lang="englsh" is invalid).

    • Verify that all values conform to ISO language standards (e.g., ISO 639-1 and BCP 47).

  6. Validation:
    Use tools like the W3C Validator or accessibility testing tools (e.g., axe DevTools) to confirm your language codes are valid.


Why it Matters

Proper use of language attributes is essential for accessibility:

  • Screen Reader Accuracy: Screen readers rely on lang attributes to switch voice engines and pronunciation rules. Without valid language codes, content may be read incorrectly, causing confusion.

  • Multilingual Support: Websites that contain multiple languages must identify each language change to ensure that multilingual users experience smooth and intelligible narration.

  • Legal and Regulatory Compliance: Valid language codes help meet accessibility standards like WCAG and EN 301 549, reducing legal risk and improving usability for people with disabilities.

Failing to specify or incorrectly specifying the document language undermines the user experience and may result in non-compliance.


Rule Description

All HTML documents must define a valid language using the lang attribute. The value must match recognized language codes to allow screen readers to interpret and pronounce content correctly.


The Algorithm (in simple terms)

  1. Check if the <html> element includes a lang attribute.

  2. Confirm that the value matches a valid language code (e.g., en, fr-CA, es, de-DE).

  3. If the attribute is missing or contains an invalid code, flag an error.

Leave A Comment