WCAG Principle: Understandable
Guideline 3.1: Readable (Make text content readable and understandable).
Conformance Level: A (Minimal Requirement)
What is Success Criterion 3.1.1?
The default human language of each Web page can be programmatically determined.
This success criterion requires web pages to specify their primary language in the HTML code. This helps browsers and assistive technologies, such as screen readers, accurately interpret and present the text on the page.
Think of it like labeling a book with its language. If you pick up a dictionary marked “English Dictionary” you know what to expect. Likewise, by specifying the language of a web page, tools such as screen readers can correctly pronounce words and phrases. This makes the website easier to understand for everyone to understand, especially people who rely on assistive technologies.
How does it make your website accessible?
Specifying the primary language of your web page improves screen reader accessibility by ensuring that screen readers and other assistive technologies can correctly interpret and pronounce text on the page. It also ensures that assistive tools can provide accurate grammar and spelling corrections. And finally, it improves the website’s SEO by making its content more accessible to non-English speakers.
Who benefits?
- People who rely on screen readers and other assistive technologies
- People with cognitive disabilities
- Multilingual users
- Translators using translation tools.
How to Meet Success Criterion 3.1.1
Common mistakes on websites:
- Omitting the lang attribute in the HTML tag.
- Using the wrong language code, like lang=”eng” instead of lang=”en”.
- Not updating the lang attribute for content sections in different languages within the same page.
How to fix mistakes:
- Include the lang attribute in the <html> tag for every page.
- Ensure the language code matches the content’s primary language.
- Ensure all pages and sections within pages consistently declare the correct language. Update templates when necessary and check for language consistency during content updates.
- For multilingual content, update the lang attribute for specific sections of text.
Helpful tips for developers:
- Navigate to the web page you want to check. Right-click on the page and select “Inspect” or “View Page Source” to open the developer tools or source code viewer.
- In the HTML code, find the opening <html> tag near the top of the document.
- Ensure the <html> tag includes a lang attribute that specifies the primary language of the page (e.g., lang=”en” for English).
- If the page contains content in multiple languages, ensure that the lang attribute is correctly set for each section of text in a different language. For instance, a paragraph in Spanish should have lang=”es”.
- Use a screen reader to navigate the page and listen to the pronunciation. Ensure the screen reader correctly interprets and pronounces the text based on the specified language.
- Use browser extensions or add-ons designed for accessibility checks, such as WAVE or Flowy by Equally AI, to verify the presence and correctness of the lang attribute.
Bad and Good Examples of Language of Page (Code Snippets)
Code example that fails success criterion 3.1.1
Code Snippet
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This website is in English, but the language is not specified in the HTML code.</p>
</body>
</html>
This code snippet fails to conform to WCAG standards because it does not specify the primary language of the page in the HTML code. Without the lang attribute, screen readers and other assistive technologies cannot accurately interpret and pronounce the text. This confuses people who rely on these tools to access and understand web content.
Code example that meets success criterion 3.1.1
Code Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to my website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This website is in English, and the language is specified in the HTML code.</p>
</body>
</html>
This code snippet passes Success Criterion 3.1.1 because it includes the lang attribute in the <html> tag, specifying that the primary language of the page is English (lang=”en”). This allows screen readers and other assistive technologies to accurately interpret and pronounce the text. As a result, people who rely on assisitive technologies can enjoy a better user experience.
Frequently Asked Questions
What should I do if a single page contains multiple languages?
Apply the lang attribute to individual sections or elements that contain text in a different language. This helps screen readers and other tools recognize and properly handle the multilingual content.
How do I choose the right language code for the lang attribute?
Use the ISO 639-1 standard language codes (e.g., en for English, fr for French). For country-specific variations, use codes like en-US for American English or en-GB for British English.
What impact does the lang attribute have on non-text content like images and videos?
While the lang attribute primarily impacts text content, it’s also important for accessibility features like alt text for images and captions for videos. Simply put, it ensures these elements are correctly interpreted by assistive technologies.
How does Success Criterion 3.1.1 relate to other WCAG success criteria?
This success criterion closely aligns with Success Criterion 3.1.2 (Language of Parts) by ensuring both the overall page and specific sections are correctly identified for language. It also supports Success Criterion 1.3.1 (Info and Relationships) by helping assistive technologies interpret text accurately. Lastly, it enhances Success Criterion 4.1.2 (Name, Role, Value) by providing the correct linguistic context for user interface components.
