Understanding WCAG SC 3.1.1 Language of Page
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 3.1.1 requires that the default human language of each web page be programmatically determined. This ensures that assistive technologies can switch to the correct reading language, load the appropriate pronunciation rules, accents, and that traditional browsers can render text correctly. Properly defining the language helps users with disabilities understand content better.

Benefits:

  1. Improved Screen Reader Functionality: Ensures that screen readers recognize the page's language and dialect. This helps in processing the necessary rules and punctuation that are unique to the language.

Main Objective:

To ensure that the default language of each web page is correctly defined so that assistive technologies and browsers can render and interpret the content accurately: If the language of the document is mixed, the language that is primarily used on the page will take precedence. If two languages are equally used, the language that comes first will be used as the default language of the document.
To ensure this, we need to include the 'lang' attribute on the <html> tag of each page.

Best Practices:

  • Use the lang Attribute: Ensure that each page of your website includes the lang attribute in the <html> element. <html lang="en-US">

  • Correct Language Codes: Use the appropriate language code, including regional variations if necessary (e.g., lang="en-US" for American English and lang="en-GB" for British English).

  • Consistent Implementation:Apply the lang attribute consistently across all pages of your website.

Examples & Explanation:

Example: Defining the Content of an HTML Document to Be in French

What Should Be Avoided

Scenario: A webpage is intended for French-speaking users, but the language is not properly defined in the HTML code.

HTML/CSS

              <!doctype html>
              <html lang="fr">
              <head>
                <meta charset="utf-8">
                <title>document écrit en français</title>
              </head>
              <body>
                ... document écrit en français ...
              </body>
              </html>

Explanation:Without the lang attribute, screen readers, text-to-speech AT, and browsers cannot determine the language of the page, which may lead to incorrect pronunciation and rendering issues.

What Should Be Done

HTML/CSS

              <!doctype html>
              <html lang="fr-FR">
              <head>
                <meta charset="utf-8">
                <title>document écrit en français</title>
              </head>
              <body>
                ... document écrit en français ...
              </body>
              </html>

Explanation:By adding the lang='fr-FR' attribute, the language of the page is clearly defined as French from France. This ensures that screen readers and other assistive technologies use the correct language, pronunciation rules, accents, and that browsers render the text accurately. This simple addition significantly improves accessibility and user experience for French-speaking users from France.

Next Up

Enhance your understanding with SC 3.1.2 - Language of Parts. Learn to make language settings accessible for all users.

Go to SC 3.1.2