Understanding WCAG SC 3.1.2 Language of Parts
Version and Level: 2.0/2.1/2.2 (Level AA)

Success criterion 3.1.2 requires that phases, languages of sections, phases, and words of the page should be programmatically determined. Following Success criterion 3.1.1 - Language of page, which requires the page’s language to be programmatically determined, this success criterion focuses on each section or phrase that is different from the page’s main language.

Benefits:

  1. Screen-reader users: Screen readers or other text-to-speech technologies can recognize the language of the section and therefore translate it to the end user with the correct rules, accents, and punctuation of the language.
  2. Enhanced accuracy: Some users utilize text-to-speech assistive technologies because hearing the text is easier for them than reading it. Encoding the text in the correct language will ensure that the text is synthesized into speech accurately in the intended language.

Main Objective:

To ensure that any content written in a language different from the default page language is clearly defined programmatically. This allows assistive technologies and browsers to process it correctly, except for words or phrases that have become a natural part of the surrounding text, even if they originate from another language.

Best Practices:

  • Use Appropriate Language Codes: Whenever a specific section or part is in a different language and is not a natural part of the surrounding text, apply the lang attribute to the enclosing element with the desired language code. (e.g., <span lang="es-ES">Español</span>)

  • Review All Content: Review the text of your content to identify foreign languages. Determine if the word or sentence is an exception; if not, apply the correct language code to the HTML wrapper.

Examples & Explanation:

Example: French Phrases in an English Context

What Should Be Avoided

Scenario: An English webpage includes French phrases but does not specify the language programmatically.

HTML/CSS

              <!doctype html>
              <html lang="en-GB">
              <head>
                <meta charset="utf-8">
                <title>WCAG Blog</title>
              </head>
              <body>
                <p>She has a certain <em>je ne sais quoi</em> that makes her unique.</p>
              </body>
              </html>

Explanation:Without the lang attribute, assistive technologies may struggle to pronounce "je ne sais quoi" correctly according to French pronunciation rules, potentially causing confusion for users relying on screen readers.

What Should Be Done

An English webpage includes French phrases but this time specifies the language programmatically.

HTML/CSS

              <!doctype html>
              <html lang="en-GB">
              <head>
                <meta charset="utf-8">
                <title>WCAG Blog</title>
              </head>
              <body>
                <p>She has a certain <em><span lang="fr-FR">je ne sais quoi</span></em> that makes her unique.</p>
              </body>
              </html>

Explanation:By adding the lang="fr" attribute to the French phrase "je ne sais quoi," assistive technologies and browsers can adjust pronunciation rules accordingly, using the French language. This ensures that users employing text-to-speech or screen-reader software will notice the change in pronunciation and accent, avoiding confusion that might arise from using an English accent, which could lead them to think the word is of English origin.

Next Up

Expand your understanding with SC 3.2.1 - On Focus. Learn to make on-focus interactions accessible for all users.

Go to SC 3.2.1