Loading...
Loading content...
Loading content...
Set the language attribute on the html tag (e.g., <html lang='en'>).
Why it matters: Screen readers need to know the language to pronounce words correctly.
The default human language of each Web page can be programmatically determined.
What This Means: This success criterion requires that the default human language of each web page is programmatically identified. This is typically done using the lang attribute on the <html> element. The language code should match the primary language of the page content.
Why It's Important: Screen readers and other assistive technologies need to know the language of the content to use the correct pronunciation rules and language-specific features. Without the lang attribute, screen readers may mispronounce words or use incorrect language rules, making content difficult or impossible to understand for users who rely on audio output.
Add the lang attribute to the <html> element with a valid language code (ISO 639-1 or BCP 47). For example, <html lang='en'> for English, <html lang='es'> for Spanish, or <html lang='fr'> for French. Use more specific codes when appropriate (e.g., 'en-US' for American English vs 'en-GB' for British English). The lang attribute must be present on every page and must match the primary language of the content.
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.
HTML tag has no lang attribute, so screen reader doesn't know the language.
<html>HTML tag has lang attribute, so screen reader uses correct pronunciation.
<html lang="en">This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.1.1 Language of Page 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 the page is in English, I don't need to set lang='en'.
Screen readers need the lang attribute to know how to pronounce words. Without it, they may use incorrect pronunciation rules.
The lang attribute is just for SEO, not accessibility.
While lang helps SEO, it's primarily an accessibility requirement. Screen readers rely on it for correct pronunciation.
Missing lang attribute on <html> element.
Add lang attribute to <html> tag. Example: <html lang='en'> for English pages.
Incorrect or invalid language code.
Use valid ISO 639-1 or BCP 47 language codes. Examples: 'en' for English, 'es' for Spanish, 'fr' for French.
Lang attribute doesn't match page content language.
Ensure lang attribute matches the primary language of the page content. Update it if content language changes.
Note: These are official W3C resources for 3.1.1. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.1.1 Language of Page 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