3.1.2: Language of Parts
Guideline 3.1.2 ensures that the language of each passage or phrase in a webpage can be programmatically determined. This helps assistive technologies like screen readers to accurately interpret and pronounce the content in the appropriate language, enhancing accessibility for multilingual users.
Importance of 3.1.2: Language of Parts Success Criterion
Specifying the language of different parts of a webpage is crucial for several reasons. It ensures that screen readers can apply the correct pronunciation rules for each language, which is vital for understanding the content. This is particularly important for users with visual impairments or cognitive disabilities who rely on assistive technologies. It also improves the user experience for multilingual users by providing accurate language switching and interpretation, reducing confusion and enhancing comprehension. Additionally, proper language declaration helps search engines better understand and index the content, improving SEO.
Primary Use Cases and Requirements Under Guideline 3.1.2: Language of Parts (Level AA)
Use Case 1: Multilingual Articles
Example: A news article in English that includes a quote in Spanish.
Implementation: Use the lang attribute to specify the language of
the quote within the content.
How to Test: Inspect the HTML to ensure the lang attribute is
correctly applied to the quote. Use a screen reader to verify correct pronunciation of the quote
and the surrounding content.
Use Case 2: Bilingual Websites
Example: A corporate website with sections available in both English and French.
Implementation: Specify the language of each section using the lang
attribute.
How to Test: Navigate to different sections and inspect the HTML tags to ensure
the correct lang attribute is used. Use a screen reader to verify correct
pronunciation in each section.
Use Case 3: Multilingual User Interfaces
Example: A web application with buttons and labels in multiple languages.
Implementation: Apply the lang attribute to each element that is in
a different language.
How to Test: Inspect the HTML to verify that the lang attribute is
correctly applied to each element. Use a screen reader to check for accurate pronunciation of
each element.
Use Case 4: Language-Specific Navigation Menus
Example: A website with a navigation menu in multiple languages.
Implementation: Use the lang attribute to specify the language of
each menu item.
How to Test: Use keyboard navigation to move through the menu items and inspect
the HTML to ensure the correct lang attribute is used. Use a screen reader to
verify correct pronunciation.
Testing Steps:
1. Manual Testing: Inspect the HTML of the page to ensure the lang
attribute is correctly applied to different language parts. Verify that language-specific
content sections have the appropriate lang attribute.
2. Screen Reader Testing: Use a screen reader to navigate through the webpage. Confirm that the screen reader correctly pronounces the content according to the specified language for each part.
3. Automated Tools: Use automated accessibility testing tools to check for
missing or incorrect lang attributes. Review the tool's report and manually verify
any flagged elements to ensure compliance.
How to Implement 3.1.2: Language of Parts
Specifying the Language of a Passage or Phrase
Use the lang attribute to declare the language of specific parts of the content.
<p>This article is written in English. <span lang="es">Esta es una cita en español.</span></p>
Specifying the Language for Different Sections
Use the lang attribute to declare the language of different sections of the content.
<div lang="en">
<p>This section is in English.</p>
</div>
<div lang="fr">
<p>Cette section est en français.</p>
</div>
Specifying the Language for User Interface Elements
Use the lang attribute to declare the language of individual user interface
elements.
<button lang="de">Klicken Sie hier</button>
<label lang="it">Nome</label>
Testing and Iteration
Regularly test language declaration as part of your development process. Use real-world scenarios
and assistive technologies to ensure the lang attribute is correctly implemented
and recognized.