Loading...
Loading content...
Loading content...
Mark up changes in language within the page (e.g., <span lang='fr'>).
Why it matters: Ensures correct pronunciation of foreign words by screen readers.
The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediate surrounding text.
What This Means: This success criterion requires that any text in a different language from the page's default language be marked up with the appropriate language attribute. This allows screen readers to switch to the correct language pronunciation when encountering foreign text. Proper names, technical terms, words of indeterminate language, and words that have become part of the vernacular are exempt.
Why It's Important: When content contains text in multiple languages, screen readers need to know which parts are in which language to pronounce them correctly. Without proper language markup, a screen reader might pronounce French text using English pronunciation rules, or Spanish text using French rules, making it incomprehensible to users.
Use the lang attribute on elements containing text in a different language. For inline text, use <span lang='fr'> for French, <span lang='es'> for Spanish, etc. For block-level content, add lang to container elements like <div lang='fr'>. The lang attribute should match the actual language of the text, not just the page default.
This criterion ensures that screen reader users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
French text in an English page is not marked, so the screen reader pronounces it with English rules.
<p>Welcome to our site. Bienvenue sur notre site.</p>French text is marked with lang='fr', so the screen reader switches to French pronunciation.
<p>Welcome to our site. <span lang="fr">Bienvenue sur notre site.</span></p>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.1.2 Language of Parts are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If it's just one word, I don't need to mark it.
Even single words in different languages should be marked with lang attributes so screen readers pronounce them correctly.
Proper names don't need language markup.
While proper names are technically exempt, it's still good practice to mark them if they're clearly from a different language.
Foreign words or phrases without lang attributes.
Add lang attributes to all text in languages other than the page default. Use <span lang='fr'> for French, <span lang='es'> for Spanish, etc.
Block-level language changes without lang on container.
Add lang attribute to container elements (div, section, article) when entire blocks are in different languages.
Incorrect language codes on foreign text.
Use correct language codes. Verify codes match the actual language of the text.
Note: These are official W3C resources for 3.1.2. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.1.2 Language of Parts correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Understandable PrincipleGuideline
3.1 Readable