Skip to main content

Identify the Primary Language of the Page

Disabilities Affected: Visual
Success Criterion: 3.1.1
Level: A
The primary human language of the web page must be programmatically identified using the lang attribute on the <html> element.

Why It Matters

Screen readers use the declared language to load the correct pronunciation rules and character sets. If the language is not specified or is incorrect, the screen reader may mispronounce words, making the content difficult or impossible to understand for visually impaired users relying on text-to-speech.

Fixing the Issue

Add the lang attribute to the <html> tag at the beginning of your HTML document. The value should be the appropriate ISO language code (e.g., en for English, es for Spanish, fr for French, en-GB for British English). If parts of the page are in a different language, use the lang attribute on the element containing that content.


Good Code Example

Specifying the primary language of the page and a language change within the content:

  • <!DOCTYPE html>
    <html lang="en"> <head>
      <meta charset="UTF-8">
      <title>My English Page</title>
    </head>
    <body>
      <h1>Welcome</h1>
      <p>This page is primarily in English.</p>
      <p>However, here is a quote in French:
         <span lang="fr">"Je pense, donc je suis."</span> </p>
    </body>
    </html>

Bad Code Example

Missing or incorrect language declaration:

  • <!DOCTYPE html>
    <html> <head>
      <meta charset="UTF-8">
      <title>My Page</title>
    </head>
    <body>
      <p>This content's language is unknown to assistive technology.</p>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="es"> <head>
      <meta charset="UTF-8">
      <title>My English Page</title>
    </head>
    <body>
      <p>This English text might be read with Spanish pronunciation rules.</p>
    </body>
    </html>
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.