WCAG (Level AA) SC 3.1.2 Language of Parts (w3.org)
Issue description
WCAG 3.1.2, “Language of Parts” addresses the challenge of understanding web pages that include content in multiple languages. While WCAG 3.1.1 focuses on the overall language of the page, this guideline deals with situations where the language changes within the content itself.
Many websites include content in multiple languages, such as:
- Words or phrases in a different language: A page might include foreign words, technical terms, or quotes in a different language.
- Sections in different languages: A website might have sections or pages dedicated to different languages.
- Changes within a sentence: A sentence might switch between languages, such as when providing a translation or using a foreign phrase.
When these language changes are not clearly identified, it can create problems for:
- Screen reader users: Screen readers need to know the language of each part of the content to pronounce it correctly and apply the appropriate language rules. Without this information, the screen reader might mispronounce words or use the wrong intonation.
- Users with cognitive disabilities: Users with cognitive disabilities may find it difficult to understand content if the language changes unexpectedly.
- Translation tools: Translation tools rely on language information to accurately translate the content. Without clear language identification, the translation might be inaccurate.
Essentially, this guideline ensures that language changes within the content are clearly identified, improving accessibility and usability for everyone, especially those who rely on assistive technologies or speak different languages.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 3.1.1 Language of Page
- WCAG (Level AAA) SC 3.1.3 Unusual Words
- WCAG (Level AAA) SC 3.1.4 Abbreviations
- WCAG (Level AAA) SC 3.1.5 Reading Level
- WCAG (Level AAA) SC 3.1.6 Pronunciation
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
To remediate WCAG 3.1.2 “Language of Parts” and ensure your content is accessible to users with diverse language needs, follow these steps:
Identify language changes
- Review your content: Carefully examine your web pages for any instances where the language changes within the text. This includes:
- Words or phrases in a different language.
- Entire sections or blocks of text in a different language.
- Changes in language for quotations or citations.
Use the lang attribute
- Apply to HTML elements: Use the lang attribute within your HTML code to identify the language of each passage or phrase. This attribute can be applied to various elements, including:
<p>for paragraphs<span>for short phrases or individual words<h1>to<h6>for headings<div>for larger sections of content
Specify language codes
Use correct codes: Use the appropriate language code to identify the language. These codes typically follow the ISO 639-1 standard (e.g., "en" for English, "es" for Spanish, "fr" for French). Example:
HTML
<p lang="en">This is an English paragraph.</p>
<p>"Kitten" in French is <span lang="fr">"Chaton"</span>.</p>Consider ARIA attributes (if needed)
- For dynamic content: If the language of content changes dynamically (e.g., user-selected language preferences), use ARIA attributes like
aria-labelto provide the language information to assistive technologies.
Exceptions
- Certain categories of words and phrases are exempt from language identification: These include proper names, specialized vocabulary (technical terms), words whose linguistic origin is uncertain, and phrases or expressions that are commonly used and understood within the context of the surrounding text.
Testing
- Use assistive technologies: Test your website with screen readers and other assistive technologies to ensure the language changes are correctly identified and announced to users.
Example
Let’s say you have an English website with a Spanish quote in an article:
HTML
<html lang="en">
[site content]
<figure>
<blockquote lang="es">
<p>¡Lo hicimos!</p>
</blockquote>
<figcaption>— Dora the Explorer</figcaption>
</figure>
</html>By using the lang attribute, you ensure that assistive technologies can correctly identify and process the language changes, providing a seamless and understandable experience for all users.
